Toast轻提示是一个很轻的组件，不会像弹出层或者是弹出框兴师动众地展示出来有一种笨重地压迫感，它是在一个操作后的一个轻反馈，显示后会自动消失，不用人为去操作关闭，很是方便。
准备工作：
- 创建一个页面: NumberKeyboard.vue
- 在router.js里配置NumberKeyboard页面的路由
{
path: '/numberkeyboard',
name: 'numberkeyboard',
component: () => import('./views/NumberKeyboard.vue')
}
- 在index.vue里添加一项
<a href="javascript:void(0)" @click="$router.push('/numberkeyboard')">
<van-col span="6" class="marb20">
<van-icon name="records" />
<div>NumberKeyboard 数字键盘</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了21个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示NumberKeyBaord数字键盘：
NumberKeyBoard数字键盘有两种模式，一种是默认样式，另一种是自定义样式。
默认样式：
<van-button type="normal" @click="onClick">弹出默认键盘</van-button> <van-number-keyboard :show="isShow" close-button-text="完成" extra-key="." @blur="isShow=false" @input="onInput" @delete="onDelete" />
NumberKeyBoard数字键盘有show属性，所以可以有弹出事件。
删除按钮和确定按钮上的文字都是可以自定义的。比较简单就不多说。
extra-key：左下角的按键内容。可以变幻成你任何想要的字符
onClick() {
this.isShow = true
},
onInput(value) {
this.$toast(value)
},
onDelete() {
this.$toast("delete")
},
在测试的时候，hide-on-click-outside和@blur并不起任何作用，不知道是什么原因。如有小伙伴们知道望告知。还有一个比较有用的属性是z-index，如果键盘被挡着，可以将这个值设置高些。
自定义样式：
自定义样式和默认样式主要差别就是属性theme上。theme有两个值，一个是default，即默认样式；一个是custom，即自定义样式。
<van-number-keyboard :show="isShow" close-button-text="完成" theme="custom" extra-key="." :hide-on-click-outside="true" @blur="isShow=false" @input="onInput" @delete="onDelete" />
数字键盘在项目开发过程中，经常会和input或者field一起使用，主要用在密码或者其它input的type为number的弹出。下节课将结合密码输入框，一起展示一个小实例。期待下一节课再见吧！
今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油