组件用.vue还是.js_Vue.js的出色Pincode输入组件-CSDN博客

组件用.vue还是.js

Vue密码输入 (vue-pincode-input)

Great pincode input component for Vue.js applications.

Vue.js应用程序的绝佳Pincode输入组件。

特征 (Features)

configurable length (symbols count)
可配置的长度(符号计数)
override-friendly styles
覆盖友好样式
auto moving focus when filling
填充时自动移动焦点
auto moving focus when deleting
删除时自动移动焦点
auto selecting cell content on focusing
自动选择焦点上的单元格内容
call for native numeric keyboard on mobiles
在手机上要求使用本机数字键盘
optional secure mode (password input type)
可选的安全模式(密码输入类型)
character preview on typing (configurable duration)
打字时的字符预览(可配置的持续时间)

注意！ (Attention!)

Styles that component have are written just for demo. But that styles are override-friendly, so you can write any styles you want.

该组件具有的样式仅用于演示。但是这些样式是重写友好型的，因此您可以编写所需的任何样式。

用法 (Usage)

npm i --save vue-pincode-input

or with yarn

或与纱线

yarn add vue-pincode-input

Then in any component:

然后在任何组件中：

import PincodeInput from 'vue-pincode-input';
// The name can be different depending on your desire

<div class="input-wrapper">
  <PincodeInput
    v-model="code"
    placeholder="0"
  />
</div>

Attention: you should use 'input.vue-pincode-input' instead '.vue-pincode-input' in order to rule specificity was higher

注意：您应该使用“ input.vue-pincode-input”而不是“ .vue-pincode-input” ，以便规则特异性更高

<style>
div.vue-pincode-input-wrapper {
  // any styles you want for wrapper
}

input.vue-pincode-input {
  // any styles you want for each cell
}
<style>

道具 (Props)

length (symbols count)

长度 (符号计数)
- type: Number
  类型：数字
- default: 4
  默认值：4
autofocus (auto focus first cell)

自动对焦 (第一个单元格自动对焦)
- type: Boolean
  类型：布尔型
- default: true
  默认值：true
secure (password input type)

安全 (密码输入类型)
- type: Boolean
  类型：布尔型
- default: false
  默认值：false
characterPreview (preview character on typing)

characterPreview (打字时预览字符)
- type: Boolean
  类型：布尔型
- default: true
  默认值：true
previewDuration (duration of character preview)

PreviewDuration (字符预览的持续时间)
- type: Number
  类型：数字
- default: 300
  默认值：300

去做 (ToDo)

configure husky
配置沙哑
write unit tests for v0.1.0 (secure prop)
编写v0.1.0的单元测试(安全道具)
write unit tests for v0.2.0 (characterPreview and previewDuration props)
编写v0.2.0的单元测试(characterPreview和PreviewDuration道具)
write unit tests for pasting data
编写单元测试以粘贴数据