vue2组件系列第二十六节:PasswordInput 密码输入框

PasswordInput 密码输入框需要与NumberKeyboard 数字键盘结合起来应用。我们经常见到的场景就是在支付宝或者是微信端支付时输入支付密码。这个组件厉害了！

准备工作：

1. 创建一个页面: PasswordInput.vue
2. 在router.js里配置PasswordInput页面的路由

{
 path: '/passwordinput',
 name: 'passwordinput',
 component: () => import('./views/PasswordInput.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/passwordinput')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>PasswordInput</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了22个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示PasswordInput密码输入框：

我们首选显示密码输入框：

<van-password-input
 :value="value"
 info="密码6位数字"
 @focus="showKeyboard=true"
/>

value：密码值。这个类型是字符型，但是我们在输入的时候是number型，需要转化下，这一点要稍稍注意一下。

info：输入框下方的文字提示。

focus：输入框聚焦时的触发事件。

下面我们需要显示NumberKeyboard 数字键盘：

<van-number-keyboard
 :show="showKeyboard"
 @input="onInput"
 @delete="onDelete"
/>

输入数字的时候会触发input事件，当我们删除一个数字时会触发delete事件。

data() {
 return {
 showKeyboard: false,
 value: ''
 }
 },
 methods: {
 onInput(key) {
 this.value = (this.value + key).slice(0, 6);
 },
 onDelete() {
 this.value = this.value.slice(0, this.value.length-1)
 },
 }

showKeyboard：控制NumberKeyboard 数字键盘显示与隐藏。

this.value = (this.value + key).slice(0, 6);

因为key是number类型，而this.value是字符类型，需要将其转化一下，转化成字符串，否则会出错噢。

this.value = this.value.slice(0, this.value.length-1);

返回一个从0开始到this.value前一个字符结束的字符串，即包含从 start 到 end （不包括该元素）的 this.value中的元素。

这个效果是不是很酷！但是又不会浪费我们很长时间去开发，简直太棒了！为自己鼓掌，又学完一个组件，在做项目的道路上又攻克一个难关！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油