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

说明

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

    点击查看源码

19 声望
1 粉丝
0 条评论
推荐阅读
vite开发环境跳转页面卡住,加载慢,ant-design-vue 按需导入的新组件导致页面加载慢
环境vite: 2.9.9unplugin-vue-components: 0.19.6参考issues: 使用按需引入时,首次启动服务会依赖预构建style#361vite-plugin-ifdef(在vite中使用condition complie)问题描述本地开发时,遇到跳转页面要等10s以...

suri1阅读 1.3k评论 2

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.3k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
vue中style scope深度访问新方式(:deep())
1、&gt;&gt;&gt;如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析&gt;&gt;&gt;,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
19 声望
1 粉丝
宣传栏