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

suri

说明

这是一个vue移动端车牌号输入组件,此组件依赖vant的van-action-sheet和van-button等组件,同时使用了less

效果图

vant-number-plate-1.jpg

vant-number-plate-2.jpg

演示地址

使用示例

  • 示例一:只使用键盘,自定义显示组件

    <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>

    点击查看源码

阅读 300
16 声望
0 粉丝
0 条评论
你知道吗?

16 声望
0 粉丝
文章目录
宣传栏