import Vue from 'vue';
import {KeyBoard} from 'vue-ydui/dist/lib.rem/keyboard';
/* 使用px：import {KeyBoard} from 'vue-ydui/dist/lib.px/keyboard'; */
Vue.component(KeyBoard.name, KeyBoard);<template>
<div>
<yd-button size="large" type="primary" @click.native="show1 = true">打开</yd-button>
<yd-keyboard v-model="show1" :input-done="done1"></yd-keyboard>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
show1: false
}
},
methods: {
done1(val) {
console.log('输入的密码是：' + val);
this.$dialog.loading.open('验证支付密码');
/* 模拟异步验证密码 */
setTimeout(() => {
window.$yduiBus.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
this.$dialog.loading.close();
}, 2000);
}
}
}
</script>将yd-keyboard组件的 v-model 绑定到一个本地变量show1，通过操作这个变量即可控制 keyboard 的显示与隐藏；
同时给:input-done绑定一个本地方法，当6位密码输入完全后将会调用调用；
通过window.$yduiBus.$emit('ydui.keyboard.error', '错误信息');提示错误信息；
注意：原 this.$yduiBus.$emit() 已改为 window.$yduiBus.$emit()。
<template>
<div>
<yd-button size="large" type="primary" @click.native="show2 = true">打开 - 打乱键盘顺序</yd-button>
<yd-keyboard v-model="show2" :input-done="done2" disorder></yd-keyboard>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
show2: false
}
},
methods: {
done2(val) {
console.log('输入的密码是：' + val + ' - 无序');
this.$dialog.loading.open('验证支付密码');
/* 模拟异步验证密码 */
setTimeout(() => {
window.$yduiBus.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
this.$dialog.loading.close();
}, 2000);
}
}
}
</script>在yd-keyboard组件上设置disorder或:disorder="true"即可打乱键盘顺序。