vue怎么实现输入框(vue车牌输入组件使用方法详解)
类别:编程学习 浏览量:256
时间:2021-10-25 10:49:03 vue怎么实现输入框
vue车牌输入组件使用方法详解一个简单的车牌输入组件(vue),供大家参考,具体内容如下
效果图:
vue代码:
<template> <li class="enTer"> <li class="plateInput" id="plateInput"> <li class="item" :class="{active: plateInput.input.type === 'p1'}" @click.stop="clickInput('p1')"><span id="p1">{{plateInput.input.value.p1}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p2'}" @click.stop="clickInput('p2')"><span id="p2">{{plateInput.input.value.p2}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p3'}" @click.stop="clickInput('p3')"><span id="p3">{{plateInput.input.value.p3}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p4'}" @click.stop="clickInput('p4')"><span id="p4">{{plateInput.input.value.p4}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p5'}" @click.stop="clickInput('p5')"><span id="p5">{{plateInput.input.value.p5}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p6'}" @click.stop="clickInput('p6')"><span id="p6">{{plateInput.input.value.p6}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p7'}" @click.stop="clickInput('p7')"><span id="p7">{{plateInput.input.value.p7}}</span></li> <li class="item" :class="{active: plateInput.input.type === 'p8',new: !plateInput.input.value.p8}" @click.stop="clickInput('p8')"><span id="p8">{{plateInput.input.value.p8}}</span></li> </li> <li class="bords" v-if="plateInput.input.dialogVisible"> <li class="bor"> <li class="btns"> <button type="primary" size="small" plain @click="hiddenKeybord">取消</button> <button type="primary" size="small" plain @click="enterWord">确认</button> </li> <ul class="keyboard province" id="province" v-if="plateInput.input.dialogVisible && plateInput.input.type === 'p1'"> <li v-for="i in Keyboard.province" @click.stop="clickKeyboard(i)">{{i}}</li> <li class="delete" @click.stop="clickDelete"><i class="icon"></i>删</li> </ul> <ul class="keyboard province" id="number" v-if="plateInput.input.dialogVisible && plateInput.input.type !== 'p1'"> <li v-for="i in Keyboard.number" :class="{num: plateInput.input.type === 'p2' && parseInt(i) >= 0 && parseInt(i) <= 9}" @click.stop="clickKeyboard(i)">{{i}}</li> <li class="delete deletes" @click.stop="clickDelete"><i class="icon"></i>删</li> </ul> </li> </li> </li> </template> <style scoped lang="scss"> .enTer{ .plateInput{ padding:0 20rpx; display: flex; justify-content: space-around; .item{ width: 60rpx; height: 75rpx; border:1rpx solid #FF5100; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; font-size: 28rpx; } .active{ border-color: #3399ff; } } .bords{ position: fixed; bottom: 0; left: 0; z-index: 999; .bor{ position: relative; .btns{ width: 100%; height: 70rpx; background: #fff; border-top:1rpx solid rgba(0,0,0,0.05); position: absolute; display: flex; justify-content: space-between; align-items: center; top: -70rpx; left: 0; button{ margin:0; } } } // 键盘 .keyboard{ position:fixed; bottom:0; left:0; background-color:#ced2d9; width:100%; height:360rpx; margin:0; padding:0; font-size:36rpx; z-index:1; } .keyboard li { list-style:none; border-radius:10rpx; } .keyboard li { float:left; background-color:#fefefe; margin-left:15rpx; margin-top:15rpx; } .num{ color: rgba(0,0,0,0.15); } .province{ position: relative; } .provinces{ position: relative; } .province li{ width:calc((100% - 15rpx * 11) / 10); height:calc((100% - 15rpx * 5) / 4); display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; justify-content: center; -webkit-justify-content: center; } .province li.delete{ width:calc((100% - 15rpx * 11) / 10 * 2 + 15rpx); } .province li.deletes{ width:calc((100% - 15rpx * 11) / 10 * 2 + 90rpx); } .disabled{ color: rgba(0,0,0,0.15); } } } </style>
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的数据。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue左右滑动切换(vue实现界面滑动效果)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- 谷雨前,吃牛羊肉别忘了吃河鲜,除湿还清热,加紫苏一炒特解馋(吃牛羊肉别忘了吃河鲜)
- 紫苏牛肉锅里滚一滚,香的鼻子都要掉了(紫苏牛肉锅里滚一滚)
- 每天都吃水果的好处(每天吃水果的好处与功效)
- 苹果15价格(苹果15价格512g官网)
- 春节放假几天(春节放假几天2023法定几天)
- 今天 3月13日,31年前,一个英雄少年感动了中国(今天3月13日31年前)
热门推荐
- filezillaserver怎么配置(解决FileZilla_Server:425 Can't open data connection 问题详解)
- docker和golang哪个好(使用Golang玩转Docker API的实践)
- tomcat架构解析(浅谈Tomcat多层容器的设计)
- html5的语法变化(详解HTML5.2版本带来的修改)
- css垂直左右居中的方式(css常用元素水平垂直居中方案)
- 安全进入docker容器的方法(使用docker部署一个简单的c/c++程序的方法)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- mysql的简单介绍(MySQL Shell的介绍以及安装)
- 宝塔linux面板部署防火墙后网页打不开报http564错误的解决办法(宝塔linux面板部署防火墙后网页打不开报http564错误的解决办法)
- Dictionary转换为list
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9