当前位置: 首页 > Web前端 > HTML5

使用vue实现简易键盘,支持移动端和pc端

时间:2023-04-05 00:27:04 HTML5

.keyboard{width:100%;保证金:0自动;字体大小:18px;边界半径:2px;顶部填充:0.5em;背景色:#e5e6e8;用户选择:无;位置:固定;底部:0;左:0;右:0;z指数:999;指针事件:自动;p{宽度:95%;保证金:0自动;高度:45px;底部边距:0.5em;显示:弹性;显示:-webkit-box;弹性方向:行;弹性包装:nowrap;证明内容:居中;我{显示:块;保证金:01%;高度:45px;行高:45px;字体样式:正常;字体大小:24px;边界半径:3px;宽度:44px;背景色:#fff;文本对齐:居中;弹性增长:1;伸缩收缩:1;弹性基础:0;-webkit-box-flex:1;&:active{背景色:变暗(#ccc,10%);}}.tab-top{宽度:50px;保证金:01%;背景:#cccdd0;颜色:#fff;字体大小:24px;}.key-delete{宽度:50px;保证金:01%;颜色:#827f7f;背景:#d7d7d8;}.tab-num{字体大小:18px;背景:#dedede;颜色:#5a5959;}.tab点{width:20px;}.tab-blank{宽度:80px;字体大小:12px;填充:015px;颜色:#5a5959;行高:60px;}.tab-symbol{宽度:20px;字体大小:18px;}.tab-enter{字体大小:30px;行高:54px;}&:nth-child(2){宽度:88%;}}}经常看到各种应用程序使用自定义键盘。本例使用vue2实现简单键盘,支持移动端和PC端使用。欢迎点赞效果:Keyboard.vue

.keyboard{width:100%;保证金:0自动;字体大小:18px;边界半径:2px;顶部填充:0.5em;背景色:#e5e6e8;用户选择:无;位置:固定;底部:0;左:0;右:0;z指数:999;指针事件:自动;p{宽度:95%;保证金:0自动;高度:45px;底部边距:0.5em;显示:弹性;显示:-webkit-box;弹性方向:行;弹性包装:nowrap;证明内容:居中;我{显示:块;保证金:01%;高度:45px;行高:45px;字体样式:正常;字体大小:24px;边界半径:3px;宽度:44px;背景色:#fff;文本对齐:居中;弹性增长:1;伸缩收缩:1;弹性基础:0;-webkit-box-flex:1;&:active{背景色:变暗(#ccc,10%);}}.tab-top{宽度:50px;保证金:01%;背景:#cccdd0;颜色:#fff;字体大小:24px;}.key-delete{宽度:50px;保证金:01%;颜色:#827f7f;背景:#d7d7d8;}.tab-num{字体大小:18px;背景:#dedede;颜色:#5a5959;}.tab点{width:20px;}.tab-blank{宽度:80px;字体大小:12px;填充:015px;颜色:#5a5959;行高:60px;}.tab-symbol{宽度:20px;字体大小:18px;}.tab-enter{字体大小:30px;行高:54px;}&:nth-child(2){宽度:88%;}}}KeyInput.vue使用demo<样式语言="less">body{背景:#efefef;}。演示类{输入{border:1pxsolid#ccc;大纲:无;高度:30px;字体大小:16px;字母间距:2px;填充:05px;}}完整代码:https://github.com/dawnyu/vue...