zm-keyboard-number
v1.0.10
Published
数字键盘显示样式
Downloads
13
Readme
zm-keyboard-number
1、导入方式
- 1、使用HBuilderX导入插件
- 2、下载插件ZIP
- 3、node 导入
- 3.1、在【package.json】文件中添加导入配置
"dependencies": {
"zm-keyboard-number": "^1.0.10"
}
- 3.2、打开项目中的终端,输入:
npm install
- 3.3、下载成功后在【node_modules】中显示
2、使用
2.1、uni_modules导入
该方式导入组件支持easycom组件模式,可以不用引用、注册,直接在页面中使用。如下:
1、组件使用
<zm-keyboard-number @keyinput="onKeysInput" @del="onKeysDel" />
2、方法实现
data() {
return {
smsCode: '12', // 验证码
codeLength: 4,
}
},
methods: {
// 键盘 - 监听键盘变化
onKeysInput(item) {
if (this.smsCode.length > this.codeLength - 1) {
return false;
}
this.smsCode = this.smsCode + item.key;
},
// 键盘 - 点击删除按钮
onKeysDel(item) {
let temp = this.smsCode.split('') || [];
temp.pop();
this.smsCode = temp.join("");
},
},
2.2、npm导入
组件引用与注册
import ZmKeyboardNumber from "zm-keyboard-number/components/zm-keyboard-number/zm-keyboard-number.vue"
components: {
ZmKeyboardNumber
},
其余步骤通【2.1】一致
- 插件ZIP下载导入项目,使用的时候,除了注册引用的路径不一致,其他全部一致