vant+vue在静态页面实现车牌号软键盘

 keyboard.css样式：

.vnp-header {
	height: 40px;
	padding-top: 6px;
	position: relative;
}
 
.vnp-header .vnp-btn-finish {
	position: absolute;
	right: 0;
	height: 100%;
	padding: 0 16px;
	color: #576b95;
	font-size: 14px;
	background-color: transparent;
	border: none;
	cursor: pointer;
}
 
.vnp-input-box-outer {
	width: 82%;
	max-width: 600px;
	margin: 0 auto;
	padding: 10px;
}
 
.vnp-input-box {
	padding: 10px 0;
	border: 1px solid #d8d8d8;
	border-radius: 2px;
	color: #8d8d8d;
	font-size: 15px;
	text-align: center;
}
 
.vnp-input-box ul {
	display: flex;
}
 
.vnp-input-box li {
	flex: 1;
	border-right: 1px solid #eaeaea;
	height: 28px;
	line-height: 28px;
}
 
.vnp-input-box li:first-child {
	border-right: 0;
}
 
.vnp-input-box li:last-child {
	border: none;
}
 
.vnp-input-box li.active {
	color: #1989fa;
}
 
.vnp-input-box li.active>span {
	height: 100%;
	width: 20px;
	display: inline-block;
	border-bottom: 1px solid #1989fa;
}
.vnp-red {
	border: 1px solid red;
}
.vnp-keys {
	padding: 3px;
	background: #f2f3f5;
	padding-bottom: 22px;
}
 
.vnp-keys .vnp-keys-row {
	display: flex;
	justify-content: center;
}
 
.vnp-keys .vnp-btn-key-wrapper {
	flex: 0 1 calc((100% - 6px * 10) / 10);
	padding: 3px;
	box-sizing: content-box;
}
 
.vnp-keys .vnp-btn-key-wrapper.vnp-del-wrapper,
.vnp-keys .vnp-btn-key-wrapper.vnp-type-wrapper {
	flex: 1;
}
 
.vnp-keys .vnp-btn-key-wrapper.vnp-type-wrapper .vnp-smaller {
	color: #999;
	font-size: 12px;
}
 
.vnp-keys .vnp-btn-key-wrapper .vnp-btn-key {
	padding: 0;
	width: 100%;
	border-radius: 4px;
}
 
.vnp-keys .vnp-btn-key-wrapper .vnp-btn-empty {
	background: transparent;
	border: none;
}
 
.vnp-keys .vnp-btn-key-wrapper .vnp-delete-icon {
	width: 18px;
	vertical-align: middle;
}

4.在表单中使用：

	<van-field label="车牌号" required :value="form.cardNumber" is-link placeholder="请选择" @click="showCardBoard=true">van-field>
	
	<van-card-board v-model="form.cardNumber" :show.sync="showCardBoard">van-card-board>
 
 
<script type="text/javascript">
	var vm = new Vue({
		el: '#vehicleAuditAdd',
		data: {
            form: {
				cardNumber: ''
			},
			showCardBoard: false,    //控制车牌号软键盘显示隐藏
        }
    })
script>

三、知识点总结

1、如何将选中的车牌号回显在需要显示的表单中？

this.$emit('input',this.val)

解答：

• 子组件在传值的时候，选用input，如this.$emit(‘input’,this.val)，在父组件直接用v-model绑定，就可以获取到了 。
• 子组件也可以通过$emit(‘input’,false)，去改变父组件中v-model 和 子组件中 value 的值 。

因此，值在input中回显时，可以不用写自定义事件。

2. 当在多个静态页面需要使用该组件时，如何封装成组件？

解答：

• 因为已经在静态页面引入了vue.js，所以我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。
• 语法：
• 
• 如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册组件 (如果存在的话)。
• Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。例如VanCardBoard为名注册的组件，在模板中可以通过  或  引用。