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

48次阅读

共计 896 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完