vant-number-plate基于vue+vant+less的车牌号输入组件（车牌号虚拟键盘）

说明

这是一个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>

  点击查看源码