博客
关于我
一个车牌输入组件(vue)
阅读量:386 次
发布时间:2019-03-05

本文共 4128 字,大约阅读时间需要 13 分钟。

一个简单的车牌输入组件(vue)

效果图:
在这里插入图片描述
vue代码:

event事件:

export let life = {     created () {       // this.currentPlate = this.plateNumber    // console.log(this.plateNumber)    // this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1)    // this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)    // this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)  }}export let event = {     clickInput (type) {       this.methods('clickInput',type)  },  clickKeyboard (val) {       if (this.plateInput.input.type === 'p2' && parseInt(val) >= 0 && parseInt(val) <= 9) return    this.methods('clickKeyboard', val)    this.methods('setPlateNumber')    this.methods('setDirectIssuedPlateNumber')  },  //删除车牌  clickDelete () {       this.methods('clickDelete')    this.methods('setPlateNumber')    this.methods('setDirectIssuedPlateNumber')  },  hiddenKeybord(){       this.methods('hiddenKeybord')  },  enterWord(){       this.methods('enterWord')  }}export let watch = {   }

methods方法:

export default class {     clickInput(type){       this.plateInput.input.type = type    this.plateInput.input.dialogVisible = true  }  hiddenKeybord(){       this.plateInput.input.dialogVisible = false  }  enterWord(){       this.plateInput.input.dialogVisible = false  }  clickKeyboard (val) {       this.plateInput.input.value[this.plateInput.input.type] = val    let type = this.plateInput.input.type.split('p')[1]    if (type !== '8') {         this.plateInput.input.type = 'p' + (parseInt(type) + 1)    }  }  clickDelete () {       this.plateInput.input.value[this.plateInput.input.type] = undefined    let nu = this.plateInput.input.type.split('p')[1]-1    if(nu>=0){         this.plateInput.input.value['p'+nu] = undefined    }    let type = this.plateInput.input.type.split('p')[1]    if (type !== '1') {         this.plateInput.input.type = 'p' + (parseInt(type) - 1)    }  }  setPlateNumber () {       if (this.plateInput.input.plateNumber) {         this.plateNumber1 = this.plateInput.input.plateNumber    }else{         this.plateNumber1 = undefined    }  }  setDirectIssuedPlateNumber () {       if (this.plateInput.input.plateNumber) {         this.plateNumber1 = this.plateInput.input.plateNumber    }else{         this.plateNumber1 = undefined    }  }}

model数据:

export let props = ['name','plateNumber','noRightPart']export let model = {     currentPlate:undefined,  plateInput:{       input:{         value:{           p1:'桂',        p2:'B',        p3:2,        p4:2,        p5:2,        p6:2,        p7:2,        p8:0      },      type:'p1',      dialogVisible:false    }  },  Keyboard: {       province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青','宁','新','台','港','澳','使','领','警','学'],    number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C','D', 'E', 'F', 'G','H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '港', '澳']  },}export let computed = {     plateNumber1 : {       get () {         return this.plateNumber||''    },    set (val) {         this.$emit('update:plateNumber', val)    }  }}

因为这里用了独家的框架,所以根据需要把相应的生命周期函数放到正常的vue项目的位置,把event就写成正常的函数,methods就是i正常的methods里面的方法,model就是data里return的数据

转载地址:http://ksgwz.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
查看>>
Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结(78)——MySQL各版本差异整理
查看>>
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>
Mysql学习总结(9)——MySql视图原理讲解与使用大全
查看>>
Mysql学习笔记 - 在Centos7环境下离线安装Mysql
查看>>
MySQL学习笔记十七:复制特性
查看>>
Mysql学习第一课-mysql的定义及sql语句
查看>>
mysql学号的字符长度_MYSQL--2
查看>>
mysql安全模式: sql_safe_updates
查看>>
mysql安装,卸载,连接
查看>>