LicensePlate 车牌号键盘，用于车牌号的输入。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 show 属性控制键盘显示隐藏，theme 属性设置键盘的主题，toolbar 属性设置是否显示工具栏。

<wui-license-plate :show="show" :theme="theme" :toolbar="toolbar" @click="keyClick" @backspace="backspace" @complete="complete"></wui-license-plate>

const show = ref(false)
const dataValue = ref('')
const theme = ref('light')
const toolbar = ref(true)
const keyClick = (e)=> {
    //按键点击事件
    console.log(e)
    //输入的值
    let val = e.value;
    //判断
    //...
    if (dataValue.value.length === 8) return;
    dataValue.value += val;
}
const complete = e => {
    show.value = false;
    //输入框失去焦点
    wui_siRef.value.initFocus(false);
};
const backspace = e => {
    let val = dataValue.value;
    if (val) {
        dataValue.value = val.substring(0, val.length - 1);
    }
};

Slots

插槽名称	说明
default	键盘上方自定义显示内容。

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示键盘	false	-
toolbar	Boolean	是否显示工具栏（完成按钮）	false	-
text	String	完成按钮文本	完成	-
color	String	完成按钮字体颜色	#465CFF	非Nvue端默认为空，可通过css变量（--wui-color-primary）来改变颜色值
size	Number, String	完成按钮字体大小，单位rpx	30	-
fontWeight	Number, String	完成按钮字重	500	-
name	String	退格键字体图标名称，可选值： backspace-fill、backspace	backspace-fill	-
theme	String	键盘主题，可选值：light、dark	light	-
zIndex	Number, String	键盘的层级z-index值	1001	Nvue端不支持，默认越靠后的元素层级越高
safeArea	Boolean	是否适配底部安全区	true	-

Events

事件名	说明	回调参数
@click	点击键盘按键时触发（仅车牌号可选值按键）	{ value:按键值 }
@backspace	点击退格键时触发	-
@complete	点击完成按钮时触发	-

Methods

通过ref属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	返回参数
changeKeyboard	切换键盘默认显示	changeKeyboard(type)，type可选值:cn、en	-