vue移动优先配置密码输入组件 vue-pincode-input

vue移动优先配置密码输入组件 vue-pincode-input
插件名称 pincode-input
发布时间 2020年4月9日
插件作者 Seokky

一个可配置的,移动优先的个人识别码组件,用于输入安全码和密码。

变更日志:

v0.3.0(07/31/2020)

  • 固定:当我将v-model设置为null或时,字段无法清除

更多功能:

  • 填充/移除时自动移动焦点。
  • 焦点自动选择Pincode输入。
  • 在移动设备上自动调用本机数字键盘。

安装和下载:

# Yarn
$ yarn add vue-pincode-input
# NPM
$ npm install vue-pincode-input --save

使用:

1.安装并导入密码输入组件。

import PincodeInput from 'vue-pincode-input';

2.在您的应用模板中创建一个密码输入组件。

<PincodeInput
  v-model="code"
  placeholder="0"
/>

3.注册组件并完成。

export default Vue.extend({
  name: 'App',
  components: {
    PincodeInput,
  },
  data: () => ({
    code: '',
  }),
});

4.确定是否启用页面加载自动对焦。默认值:true。

<PincodeInput
  v-model="code"
  placeholder="0"
  :autofocus=false
/>

5.确定密码输入的长度。默认值:4。

<PincodeInput
  v-model="code"
  placeholder="0"
  :length="2"
/>