VUE中自定义一个获取输入车牌号码组件

VUE自定义一个组件来选择输入车牌号码

展示样式：

组件事件列表：

事件名称

event

获取车牌

@carNum

返回参数是个数组，每个车牌元素

上代码：

<template><div><div><divv-for="(item,index) in chinaShortName":class="chinaShortName[index].isClick?'item-box1':'item-box'" @click="clickShortName(index)"><a> {{ item.value }}</a></div></div><div><div :class="letters[index].isClick?'item-box2':'item-box'" :style="bgcolor"v-for="(item,index) in letters" @click="clickLetters(index)"><a>{{ item.value }}</a></div></div><div><div :class="number[index].isClick?'item-box2':'item-box'" :style="bgcolor"v-for="(item,index) in number" @click="clickNumber(index)"><a>{{ item.value }}</a></div></div><div style="float: right"></div><div class="car-number" style="display: inline-block">车牌号:<div style="display: inline" v-for="(item,index) in firstName">{{ item.value }}·</div><div style="display: inline;letter-spacing:2px;" v-for="(item,index) in otherName">{{ item.value }}</div></div><div class="backspace" @click="backSpace"><a>退格</a></div><div class="backspace" @click="comfirmCarNum"><a>确认</a></div></div>
</template><script>
export default {name: "carnumber",data() {return {bgcolor: {backgroundColor: "gray"},isAllowClickNumber: false,isActive: false,firstName: [],//otherName: [],//车牌地区简称chinaShortName: [{value: '京',label: '京',isClick: false},{value: '津',label: '津',isClick: false},{value: '沪',label: '沪',isClick: false},{value: '渝',label: '渝',isClick: false},{value: '冀',label: '冀',isClick: false},{value: '晋',label: '晋',isClick: false},{value: '蒙',label: '蒙',isClick: false},{value: '辽',label: '辽',isClick: false},{value: '吉',label: '吉',isClick: false},{value: '黑',label: '黑',isClick: false},{value: '苏',label: '苏',isClick: false},{value: '浙',label: '浙',isClick: false},{value: '皖',label: '皖',isClick: false},{value: '闽',label: '闽',isClick: false},{value: '赣',label: '赣',isClick: false},{value: '鲁',label: '鲁',isClick: false},{value: '豫',label: '豫',isClick: false},{value: '鄂',label: '鄂',isClick: false},{value: '湘',label: '湘',isClick: false},{value: '粤',label: '粤',isClick: false},{value: '桂',label: '桂',isClick: false},{value: '新',label: '新',isClick: false},{value: '黔',label: '黔',isClick: false},{value: '云',label: '云',isClick: false}],//车牌号码letters: [{label: 'A',value: 'A',isClick: false},{label: 'B',value: 'B',isClick: false},{label: 'C',value: 'C',isClick: false},{label: 'D',value: 'D',isClick: false},{label: 'E',value: 'E',isClick: false},{label: 'F',value: 'F',isClick: false},{label: 'G',value: 'G',isClick: false},{label: 'H',value: 'H',isClick: false},{label: 'J',value: 'J',isClick: false},{label: 'K',value: 'K',isClick: false},{label: 'L',value: 'L',isClick: false},{label: 'M',value: 'M',isClick: false},{label: 'N',value: 'N',isClick: false},{label: 'P',value: 'P',isClick: false},{label: 'Q',value: 'Q',isClick: false},{label: 'R',value: 'R',isClick: false},{label: 'S',value: 'S',isClick: false},{label: 'T',value: 'T',isClick: false},{label: 'U',value: 'U',isClick: false},{label: 'V',value: 'V',isClick: false},{label: 'W',value: 'W',isClick: false},{label: 'X',value: 'X',isClick: false},{label: 'Y',value: 'Y',isClick: false},{label: 'Z',value: 'Z',isClick: false}],number: [{label: '0',value: '0',isClick: false},{label: '1',value: '1',isClick: false},{label: '2',value: '2',isClick: false},{label: '3',value: '3',isClick: false},{label: '4',value: '4',isClick: false},{label: '5',value: '5',isClick: false},{label: '6',value: '6',isClick: false},{label: '7',value: '7',isClick: false},{label: '8',value: '8',isClick: false},{label: '9',value: '9',isClick: false}]}},methods: {clickShortName: function (index) {for (let i = 0; i < this.chinaShortName.length; i++) {if (index === i) {this.chinaShortName[i].isClick = trueif (this.firstName.length == 0) {this.firstName.push({type: "firstName",index: index,value: this.chinaShortName[i].value})} else {this.firstName.pop();this.firstName.push({type: "firstName",index: index,value: this.chinaShortName[i].value})}} else {this.chinaShortName[i].isClick = false}}this.isAllowClickNumber = true,this.bgcolor.backgroundColor = '';},clickLetters: function (index) {this.limitSize()if (!this.isAllowClickNumber) {//提示不可以点击this.$message("请点击省份简称")return;}for (let i = 0; i < this.letters.length; i++) {if (index === i) {this.letters[i].isClick = truethis.otherName.push({type: "letters",index: index,value: this.letters[i].value})}}},clickNumber: function (index) {this.limitSize()if (!this.isAllowClickNumber) {//提示不可以点击this.$message("请点击省份简称")return;}for (let i = 0; i < this.number.length; i++) {if (index === i) {this.number[i].isClick = truethis.otherName.push({type: "number",index: index,value: this.number[i].value})}}},limitSize() {if (this.otherName.length > 5) {this.$message.warning("输入的车牌号码过长");throw new Error("输入的车牌号码过长");}},backSpace: function () {if (this.firstName.length == 0) {this.isAllowClickNumber = false;this.$message("已经清空数据")return;}let pop = this.otherName.pop();if (this.otherName.length == 0) {let pop1 = this.firstName.pop();this.chinaShortName[pop1.index].isClick = false;this.isAllowClickNumber = false;}if (pop.type == 'number') {this.number[pop.index].isClick = false} else if (pop.type == 'letters') {this.letters[pop.index].isClick = false}},comfirmCarNum: function () {//确认车牌号let arr = [];this.firstName.forEach(item => {arr.push(item.value)})this.otherName.forEach(item => {arr.push(item.value)})this.$emit("carNum", arr);}}
}</script><style scoped>
.item-box {display: inline-block;margin: 10px;width: 30px;height: 30px;font-size: 20px;line-height: 30px;background-color: black;color: white;text-align: center;
}.item-box1 {display: inline-block;margin: 10px;width: 30px;height: 30px;font-size: 20px;line-height: 30px;background-color: white;color: black;border: 0.5px solid black;text-align: center;
}.item-box2 {display: inline-block;margin: 10px;width: 30px;height: 30px;font-size: 20px;line-height: 30px;background-color: white;border: 0.5px solid black;color: black;text-align: center;
}.car-number {font-size: 20px;font-weight: bolder;width: 230px;height: 40px;margin: 0 auto;background-color: darkblue;color: white;line-height: 40px;padding-left: 20px;border-radius: 5px;
}.backspace {display: inline-block;font-size: 20px;font-weight: bolder;height: 40px;line-height: 40px;text-align: center;margin-left: 10px;padding-left: 10px;padding-right: 10px;border-radius: 5px;border: 0.5px solid black;
}
</style>

VUE中自定义一个获取输入车牌号码组件相关推荐

怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
android sqlite自定义函数,Android中自定义一个View的方法详解
本文实例讲述了Android中自定义一个View的方法.分享给大家供大家参考,具体如下: Android中自定义View的实现比较简单,无非就是继承父类,然后重载方法,即便如此,在实际编码中难免会遇到 ...
VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...
oracle在键盘上输入,如何在plsql developer中接收一个键盘输入
如何在plsql developer中接收一个键盘输入关注:131 答案:2 手机版解决时间 2021-02-03 12:59 提问者断念劫难 2021-02-02 12:48 如何在plsq ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...

VUE中自定义一个获取输入车牌号码组件

VUE中自定义一个获取输入车牌号码组件相关推荐

最新文章

热门文章