这篇文章主要介绍了某视频剪辑软件引入射流研究…数字小键盘的实现代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
效果如图：
代码如下：
keyboard.vue
模板
div class= keyboard v-show= show keyboard v-click outside= closeModal
p v-for=键列表中的键
模板v-for=key in keys
I v-if= key=== top @ click。stop= click key class= icon字体图标-支钉tab-top/i
I v-else-if= key=== 123 @ click。stop= click key class= tab-num 123/I
I v-else-if= key== del @ click。stop= click key id= del class= icon font icon-delete key-delete /I
I v-else-if= key== blank @ click。stop= click key class= icon font icon-kongge Jian-jianpanyong tab-blank /I
I v-else-if= key=== symbol @ click。stop= click key class= tab-symbol 符/i
I v-else-if= key== point @ click。stop= click key class= tab-point /I
I v-else-if= key=== enter @ click。 stop= click key class= icon font icon-huiche tab-enter /I
我v-else @ click。stop= click key“{ key } }/I
/模板
/p
/div
/模板
脚本
从外部导入点击././指令/单击外部
导出默认值{
指令：{单击外部}
data() {
返回{
关键字列表：[],
状态：2,//0小写一大写2数字3符号
小写：[
[7, 8, 9],
[4, 5, 6],
[1, 2, 3],
[.， 0 ， del]，
],
//装备：领航员。用户代理。tolocalelowercase().匹配(/ipad|mobile/i)//是否是移动设备
}
},
道具：{
选项：{
类型：对象
}
},
计算值：{
showKeyboard(){
返回这个. option.show
}
},
已安装(){
this.keyList=this.lowercase
},
方法：{
tabHandle({ value= }) {
如果(值。索引( tab-num )-1){
this.status=2
//数字键盘数据
} else if(值。的索引( key-delete )-1){
控制台。日志(值。的索引( key-delete ))
this.emitValue("删除")
} else if(值。索引( tab-blank )-1){
this.emitValue( )
} else if(值。索引( tab-enter )-1){
this.emitValue(n )
} else if(值。索引(制表符)-1){
this.emitValue( . )))
} else if(值。索引(制表符)-1){
this.status=3
} else if(值。索引(顶部标签)-1){
if(this.status===0){
this.status=1
}否则{
this.status=0
this.keyList=this.lowercase
}
}否则{
}
},
点击键（事件){
//if(事件。type===点击这个。装备)返回
设值=事件。加速。innertext
设id=事件。加速。id；
let target=event.srcElement？事件。src元素：事件。目标；
如果(id！== id===del){//如果点击的是身份证明(识别)为倒三角形的表示是删除
这个。发出值(id)；
}else{//否则
值id！==del ？这个。发射值(value):这个。选项卡句柄(目标。班级名单)；
}
},
emitValue(key) {
console.log(键)
这个emit(keyVal ，key)
},
关闭模式(e) {
如果(e.target！==this.option.sourceDom) {
//this.showKeyboard=false
这个emit(close ，false)
}
}
}
}
/脚本
样式范围语言=少
键盘{
显示：内嵌-块；
宽度：263像素
字体大小：18px
边框-半径：2px
背景色：# e5e6e8
用户选择：无；
底部：0;
位置：绝对；/*定位数字键盘*/
左：-20px；
顶配：77px
z指数：999;
指针事件：自动；
p {
宽度：100%;
边距：0自动；
高度：42px
边距-底部：0.5em
显示器：flex
显示：-WebKit-box；
弯曲方向：行；
柔性包装：nowrap
对齐-内容：居中；
我{
显示：块；
保证金：0 0.2%;
高度：50px
行高：52px
字体样式：正常；
字体大小：24px
边框半径：3px
宽度：44px
背景色：# fff
文本对齐：居中；
伸缩增长：1;
伸缩：1;
弹性基础：0;
-WebKit-box-flex:1；
：活动{
背景色：变暗(#ccc，10%)；
}
}。顶部标签{
宽度：50px
保证金：0 1%;
背景：# cccdd0
颜色：# fff
字体大小：24px
}。按键删除{
宽度：47px
保证金：0 0.2%;
颜色：# 827f7f
背景：
}。标签号{
字体大小：18px
背景：# dedede
颜色：# 5a5959
}。tab-point {
宽度：20px
}。tab-blank {
宽度：50px
字体大小：12px
填充：0 15px
颜色：# 5a5959
行高：60px
}。制表符符号{
宽度：20px
字体大小：18px
}。标签键回车{
字体大小：30px
行高：54px
}
：第n个孩子(2) {
宽度：100%;
}
}
}
/风格
在使用页面引入代码：
超文本标记语言代码
引入数字小键盘某视频剪辑软件
注册引入的主键
定义的方法
总结
以上所述是小编给大家介绍的某视频剪辑软件引入射流研究…数字小键盘的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
