关于vue.js:vantnumberplate基于vuevantless的车牌号输入组件车牌号虚拟键盘

阐明

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

  点击查看源码