自定义h5 键盘

结果示意图如下

1.父组件 father.vue

复制代码

复制代码

2.子组件 son.vue 键盘组件

复制代码

复制代码

复制代码

4.其实这个还是很简单的,为什么要写这个呢，主要是熟练一下vue吧.,下面附上媒体查询，这个主要是控制输入金额框的光标移动。

/*媒体查询 兼容不同分辨率*/
@media screen and (max-width: 320px) {
	html{font-size: 16.68px;}
	/*16*/
}
@media screen and (min-width: 321px) and (max-width: 376px) {
	html{font-size: 19.19px;}
	/*20*/
}
@media screen and (min-width: 377px) and (max-width: 413px) {
	html{font-size: 21.5px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
	html{font-size: 22px;}
}
@media screen and (min-width: 640px) {
	html{font-size: 30px;}
}
复制代码