阐明
这是一个vue挪动端车牌号输出组件，此组件依赖vant的van-action-sheet和van-button等组件，同时应用了less
效果图
演示地址
- 手机扫码体验
- 点击查看演示
应用示例
示例一：只应用键盘，自定义显示组件
<template> <div> <h3>示例一</h3> <van-cell-group> <van-field :value="value" readonly label="车牌号" @click="show = true" /> </van-cell-group> <vnp-keyboard v-model="value" :show.sync="show"></vnp-keyboard> </div></template><script>import Keyboard from '@/components/vant-number-plate/vnp-keyboard';export default { components: { 'vnp-keyboard': Keyboard, }, data() { return { show: false, value: '川A' } }}</script><style lang="less" scoped> h3 { padding: 0 30px; }</style>示例二：应用提供的显示组件
<template> <div> <h3>示例二</h3> <div class="demo-two-box"> <vnp-input v-model="value"></vnp-input> </div> </div></template><script>import VnpInput from '@/components/vant-number-plate/vnp-input';export default { components: { 'vnp-input': VnpInput }, data() { return { value: '川A' } }}</script><style lang="less" scoped> .demo-two-box { padding: 0 30px; } h3 { padding: 0 30px; }</style>点击查看源码