mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 08:14:01 +08:00
317 lines
8.0 KiB
Vue
317 lines
8.0 KiB
Vue
<template>
|
|
|
|
<view class="components-keyboard">
|
|
|
|
<!-- 顶部自定义导航 -->
|
|
<tn-nav-bar fixed>keyboard键盘</tn-nav-bar>
|
|
|
|
<!-- 页面内容 -->
|
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
|
|
|
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true"
|
|
@click="click">
|
|
<view v-if="mode === 'number' || mode === 'card'" class="number-value">
|
|
<tn-input v-model="inputValue" type="text" :disabled="true" :border="true" placeholder="键盘输入的内容"
|
|
@click="showKeyboard"></tn-input>
|
|
<tn-button class="clear-btn" backgroundColor="tn-bg-gray" fontColor="white" width="120rpx"
|
|
height="70rpx" @click="clearInputValue">清空</tn-button>
|
|
</view>
|
|
<view v-else class="car-value">
|
|
<block v-for="(item, index) in 8" :key="index">
|
|
<view class="car-input" :class="{'new-energy': index === 7 && !licensePlateValue[index]}"
|
|
@tap="chooseLicensePlateNumber(index)">
|
|
<block v-if="index === 7 && !licensePlateValue[index]">
|
|
<view class="new-energy-car">
|
|
<view class="icon tn-icon-add"></view>
|
|
<view class="text">新能源</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<block v-if="licensePlateValue[index]===''">
|
|
|
|
</block>
|
|
<block v-else>
|
|
{{ licensePlateValue[index]}}
|
|
</block>
|
|
</block>
|
|
</view>
|
|
<view class="car-point" v-if="index === 1">
|
|
<view class="point"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</dynamic-demo-template>
|
|
|
|
</view>
|
|
|
|
<!-- 键盘 -->
|
|
<tn-keyboard v-model="value" :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled"
|
|
:switchEnMode="switchEnMode" :tooltip="tooltip" :mask="mask" @change="onChange" @cancel="onCancel"
|
|
@confirm="onConfirm" @backspace="onBackspace"></tn-keyboard>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
|
export default {
|
|
name: 'componentsKeyboard',
|
|
components: {
|
|
dynamicDemoTemplate
|
|
},
|
|
data() {
|
|
return {
|
|
value: false,
|
|
mode: 'number',
|
|
dotEnabled: true,
|
|
randomEnabled: false,
|
|
switchEnMode: false,
|
|
tooltip: true,
|
|
mask: true,
|
|
|
|
// 输入的值
|
|
inputValue: '',
|
|
// 输入的车牌
|
|
licensePlateValue: ['', '', '', '', '', '', '', ''],
|
|
// 当前选择输入的车牌号码位置
|
|
currentLicensePlateIndex: 0,
|
|
|
|
tips: ['无需依赖额外的样式文件', '使用tn-keyboard组件'],
|
|
sectionList: [{
|
|
name: '参数切换',
|
|
section: [{
|
|
title: '模式',
|
|
optional: ['数字', '身份证', '车牌'],
|
|
methods: 'modeChange'
|
|
},
|
|
{
|
|
title: '显示点',
|
|
optional: ['显示', '隐藏'],
|
|
methods: 'dotEnabledChange'
|
|
},
|
|
{
|
|
title: '打乱顺序',
|
|
optional: ['是', '否'],
|
|
methods: 'randomEnabledChange',
|
|
current: 1
|
|
},
|
|
{
|
|
title: '显示顶部工具栏',
|
|
optional: ['显示', '隐藏'],
|
|
methods: 'tooltipChange'
|
|
},
|
|
{
|
|
title: '遮罩显示',
|
|
optional: ['是', '否'],
|
|
methods: 'maskChange'
|
|
}
|
|
]
|
|
}]
|
|
}
|
|
},
|
|
watch: {
|
|
mode(value) {
|
|
switch (value) {
|
|
case 'number':
|
|
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 0)
|
|
break
|
|
case 'card':
|
|
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 1)
|
|
break
|
|
case 'car':
|
|
this.$refs.demoTemplate.updateSectionBtnsValue(0, 0, 2)
|
|
break
|
|
}
|
|
},
|
|
currentLicensePlateIndex(value) {
|
|
if (value === 0) {
|
|
this.switchEnMode = false
|
|
} else {
|
|
this.switchEnMode = true
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
click(event) {
|
|
this[event.methods] && this[event.methods](event)
|
|
},
|
|
// 弹出键盘
|
|
showKeyboard() {
|
|
this.value = true
|
|
},
|
|
// 切换模式
|
|
modeChange(event) {
|
|
switch (event.index) {
|
|
case 0:
|
|
this.mode = 'number'
|
|
this.dotEnabled = true
|
|
this.value = true
|
|
this.$refs.demoTemplate.updateSectionBtnsState(1, true)
|
|
break
|
|
case 1:
|
|
this.mode = 'card'
|
|
this.value = true
|
|
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
|
break
|
|
case 2:
|
|
this.mode = 'car'
|
|
this.licensePlateValue = ['', '', '', '', '', '', '', '']
|
|
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
|
break
|
|
}
|
|
},
|
|
// 切换点显示
|
|
dotEnabledChange(event) {
|
|
this.dotEnabled = event.index === 0 ? true : false
|
|
this.value = true
|
|
},
|
|
// 切换乱序显示
|
|
randomEnabledChange(event) {
|
|
this.randomEnabled = event.index === 0 ? true : false
|
|
this.value = true
|
|
},
|
|
// 切换顶部工具栏显示
|
|
tooltipChange(event) {
|
|
this.tooltip = event.index === 0 ? true : false
|
|
this.value = true
|
|
},
|
|
// 切换遮罩状态
|
|
maskChange(event) {
|
|
this.mask = event.index === 0 ? true : false
|
|
this.value = true
|
|
},
|
|
|
|
// 键盘输入值改变
|
|
onChange(e) {
|
|
if (this.mode === 'number' || this.mode === 'card') {
|
|
this.inputValue += e
|
|
} else if (this.mode === 'car') {
|
|
// 判断输入的值是否正确
|
|
if (this.currentLicensePlateIndex === 0 && !this.$tn.test.chinese(e)) {
|
|
this.$tn.message.toast('车牌归属地选择错误')
|
|
return
|
|
} else if (this.currentLicensePlateIndex === 1 && !this.$tn.test.letter(e)) {
|
|
this.$tn.message.toast('车牌归属地字母选择错误')
|
|
return
|
|
}
|
|
if (this.currentLicensePlateIndex !== 0 && !this.$tn.test.enOrNum(e)) {
|
|
this.$tn.message.toast('车牌号码选择错误')
|
|
return
|
|
}
|
|
// this.licensePlateValue[this.currentLicensePlateIndex] = e
|
|
this.$set(this.licensePlateValue, this.currentLicensePlateIndex, e+"")
|
|
this.currentLicensePlateIndex++
|
|
// 判断车牌是否已经选择完成
|
|
if (this.currentLicensePlateIndex === 8) {
|
|
this.value = false
|
|
}
|
|
}
|
|
},
|
|
// 点击了取消按钮
|
|
onCancel() {
|
|
this.$tn.message.toast('点击了取消按钮')
|
|
},
|
|
// 点击了确认按钮
|
|
onConfirm() {
|
|
this.$tn.message.toast('点击了确认按钮')
|
|
this.value = false
|
|
},
|
|
// 点击了退格按钮
|
|
onBackspace() {
|
|
if (this.mode === 'number' || this.mode === 'card') {
|
|
if (!this.inputValue) {
|
|
return
|
|
}
|
|
this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
|
|
} else if (this.mode === 'car') {
|
|
let licensePlateIndex = this.currentLicensePlateIndex > 7 ? 7 : this.currentLicensePlateIndex
|
|
if (this.licensePlateValue[licensePlateIndex] !== '') {
|
|
this.$set(this.licensePlateValue, licensePlateIndex, '')
|
|
} else {
|
|
licensePlateIndex = licensePlateIndex < 1 ? 0 : --licensePlateIndex
|
|
this.$set(this.licensePlateValue, licensePlateIndex, '')
|
|
}
|
|
this.currentLicensePlateIndex = licensePlateIndex
|
|
}
|
|
},
|
|
|
|
// 点击车牌对于位置进行选择输入
|
|
chooseLicensePlateNumber(index) {
|
|
this.currentLicensePlateIndex = index
|
|
this.mode = 'car'
|
|
this.value = true
|
|
},
|
|
|
|
// 清空内容
|
|
clearInputValue() {
|
|
this.inputValue = ''
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.number-value {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.clear-btn {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.car-value {
|
|
display: flex;
|
|
|
|
.car-input {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 74rpx;
|
|
width: 64rpx;
|
|
border: 1px solid $tn-border-solid-color;
|
|
border-radius: 18rpx;
|
|
text-align: center;
|
|
font-size: 38rpx;
|
|
line-height: 1;
|
|
margin-left: 10rpx;
|
|
background-color: #FFFFFF;
|
|
|
|
&.new-energy {
|
|
background: transparent;
|
|
border-style: dashed;
|
|
}
|
|
}
|
|
|
|
.car-point {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 74rpx;
|
|
width: 20rpx;
|
|
margin-left: 10rpx;
|
|
|
|
.point {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background-color: $tn-font-holder-color;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.new-energy-car {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 16rpx;
|
|
color: $tn-font-sub-color;
|
|
|
|
.icon {
|
|
margin-bottom: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |