uniapp实现车牌号输⼊框
<!-- ⾃定义的键盘弹框 -->
<template>
<view v-if="showPopup" class="uni-popup">
<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
<view class="uni-popup__wrapper-box" @click.stop="clear">
<view class="title_outer flex_between">
<view class="close_title" @click="close(true)">
取消
</view>
<view class="center_title">
请输⼊车牌号
</view>
<view class="cancle_title" @click="confirm">
确定
</view>
</view>
<view class="inp_outer flex_between">
<block v-for="(inpitem,inpindex) in inplist" :key="inpindex">
<view v-if="inpindex != 2" class="left_inp public_title flex_center_around" :class="{active : inpIndex == inpindex}"
@click="changeIndex(inpindex)">{{inpitem.title}}</view>
<view v-else class="right_inp public_title flex_center_around" :class="{active : inpIndex == inpindex}" @click="changeIndex(inpindex)">{{inpitem.title}}</view>    </block>
</view>
<view class="keyboard">
<view class="flex_center">
<view class="flex-row-wrap" >
<block v-for="(item,index) in list" :key='index'>
{{item.title}}
</view>
</block>
</view>
</view>
<view class="close flex_center_around" @click="deleteTo()">
<image class="close_img" src="/static/del.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'UniPopup',
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层  type: {
type: String,
default: 'center'
},
// 是否开启⾃定义
custom: {
type: Boolean,
default: false
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: true
},
gua: {
type: Boolean,
default: false
} // 是否是挂车号
},
data() {
return {
ani: '',
showPopup: false,
list: [], // 显⽰渲染的列表
citylist: [{
title: '京'
}, {
title: '津'
}, {
title: '沪'
}, {
title: '渝'
},
{
title: '冀'
}, {
},
{
title: '⿊'
}, {
title: '湘'
}, {
title: '皖'
}, {
title: '鲁'
},
{
title: '新'
}, {
title: '苏'
}, {
title: '浙'box sizing
}, {
title: '赣'
},
{
title: '鄂'
}, {
title: '桂'
}, {
title: '⽢'
}, {
title: '晋'
},
{
title: '蒙'
}, {
title: '陕'
}, {
title: '吉'
}, {
title: '闽'
},
{
title: '贵'
}, {
title: '粤'
}, {
title: '青'
}, {
title: '藏'
},
{
title: '川'
}, {
title: '宁'
}, {
title: '琼'
}, {
title: '澳'
},
{
title: '台'
}
], // 车牌头部⽂字的列表    zimulist: [{
}, {
title: 'D'    },
{
title: 'E'    }, {
title: 'F'    }, {
title: 'G'    }, {
title: 'H'    },
{
title: 'J'    }, {
title: 'K'    }, {
title: 'L'    }, {
title: 'M'    },
{
title: 'N'    }, {
title: 'P'    }, {
title: 'Q'    }, {
title: 'R'    },
{
title: 'S'    }, {
title: 'T'    }, {
title: 'U'    }, {
title: 'V'    },
{
title: 'W'    }, {
title: 'X'    }, {
title: 'Y'    }, {
title: 'Z'    },
{
title: '0'    }, {
title: '1'    }, {
title: '2'    }, {
title: '3'    },
{
title: '4'    }, {
},
{
title: '8'
}, {
title: '9'
}, {
title: '挂'
}
], // 车牌开头字母的列表
// gualist:[], // 挂车号
inplist: [{
title: ''
}, {
title: ''
}, {
title: ''
}], // 车牌号
ary: [], // 三级框的数字和字母
chehao: '', //最后显⽰的车牌号
noorder: false, // 判断是否按顺序填写    inpIndex: 0 // 获取车牌输⼊框的下表  }
},
watch: {
show(newValue) {
if (newValue) {
this.open()
} else {
this.close()
}
}
},
created() {},
/**
* 模板渲染完成节点操作
*/
mounted() {
this.list = this.citylist
},
methods: {
clear() {},
// 控制弹框的显⽰
open() {
this.$emit('change', {
show: true
})
this.list = this.citylist
this.inpIndex = 0
this.inplist = [{
title: ''
}, {
title: ''
}, {
title: ''
}]
this.ary = []
this.showPopup = true
this.$nextTick(() => {
setTimeout(() => {
this.ani = 'uni-' + pe

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。