电动车号牌输入组件plate-number-input使用

大佬github地址：GitHub - woke-T/input-number-plate at forApplet

1.安装组件
npm install input-number-plate-applet --save

2.vue中注册插件
import InputCar from 'input-number-plate-applet'
import 'input-number-plate-applet/lib/inputCar.css'Vue.use(InputCar)

3.包装
<template><div v-show="isShow"><div class="shadom-class"></div><div id="hphm" class="hphm-class"></div></div>
</template><script>
import PlateNumberInput from 'plate-number-input'export default {props: {isShow: {type: Boolean,default: false,require: false},defaultValue: {type: String,default: '',require: false}},data() {return {input: '',}},methods: {hphmCreate() {if (!this.input) {this.input = new PlateNumberInput({el: '#hphm',defaultNumber: this.$props.defaultValue,isNewpower: false,onBtnSaveClick: () => {this.$emit('setValue', this.input.getNumber())}})}}}
}
</script><style lang="stylus" scoped>
.hphm-class {position: fixed;z-index 100;width: 100%;
}
.shadom-class {height: calc(100vh)width: 100%;background: black;position: fixed;z-index: 99;opacity: 0.3;
}
>>> .keyboard-item {display: none;
}
</style>

4、使用
<template><div id="app"><key-board ref="keyBoard" :isShow="hphmShow" :defaultValue="form.cphJb" @setValue="getValue" /><cube-form :model="form" @valid="validateHandler" @submit="submitHandler" class="form"><cube-form-item :field="fields[0]"><cube-input v-model="form.cphJb" @click.native="hphmClick" placeholder="请输入车牌号" readonly></cube-input><!-- <car-plate v-model="form.cphJb"></car-plate> --></cube-form-item></cube-form></div>
</template><script>
import KeyBoard from '@/components/KeyBoard'export default {components: {KeyBoard},data() {return {hphmShow: false,fields: [{type: 'input',modelKey: 'cphJb',rules: {required: true},label: '车牌号'}]}},methods: {hphmClick() {this.$refs.keyBoard.hphmCreate()this.hphmShow = true},getValue(value) {console.log(value)this.hphmShow = falsethis.form.cphJb = value}}
}
</script>

电动车号牌输入组件plate-number-input使用相关推荐

vue 实现动态增加输入框_vue实现一个6个输入框的验证码输入组件
要实现的功能: 完全和单输入框一样的操作,甚至可以插入覆盖: 1,限制输入数字 2,正常输入 3,backspace删除 4,paste任意位置粘贴输入 5,光标选中一个数字,滚轮可以微调数字大小,限 ...
微信小程序开发实战（9）：单行输入和多行输入组件
-----------支持作者请转发本文----------- 1. 单行输入组件(input) input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比 ...
如何在React Native中使用文本输入组件？
You know, an app becomes more authentic and professional when there is the interaction between the a ...
Kettle8.2输入组件之多文件合并
Kettle8.2输入组件之多文件合并一.需求说明二.设计转换三.转换配置四.运行转换五.结果分析一.需求说明需求说明: 数据往往也是以多个文件的形式出现,有的数据还会分散在多个子文件夹 ...
基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览输入回调完成回调自定义验证码个数样式可控这里是可爱的Demo 支持支持 Vue.js 2.0+. 安装和使用 ...
QML 基本文本输入组件TextInput、TextField、TextEdit、TextArea
0.前言 Qt Quick 提供了两个基本的文本输入组件 TextInput 和 TextEdit ,在 Control 模块中提供了以前面两种为基类的 TextField 和 TextArea .其 ...
QT开发（十）——QT输入组件
QT开发(十)--QT输入组件 QT中有十三中输入组件,分别是下拉列表框QComboBox.字体下拉框QFontComboBox.行编辑框QLineEdit.文本编辑框QTextEdit.无格式文本编 ...
idf和adf_ADF：弹出窗口，对话框和输入组件
idf和adf 在本文中,当我们有一个af:popup包含af:dialog并在其中包含输入组件时,我想重点介绍一个非常常见的用例. 实现此用例时,需要注意一些陷阱. 让我们考虑一个简单的示例: &l ...
ADF：弹出窗口，对话框和输入组件
在本文中,当我们有一个af:popup包含af:dialog并在其中包含输入组件时,我想着重介绍一个非常常见的用例. 在实现此用例时,需要注意一些陷阱. 让我们考虑一个简单的示例: <af:po ...

电动车号牌输入组件plate-number-input使用

电动车号牌输入组件plate-number-input使用相关推荐

最新文章

热门文章