这篇文章主要介绍了某视频剪辑软件引入射流研究…数字小键盘的实现代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
效果如图：
代码如下：
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%;
}
}
}
/风格
在使用页面引入代码：
超文本标记语言代码
引入数字小键盘某视频剪辑软件
注册引入的主键
定义的方法
总结
以上所述是小编给大家介绍的某视频剪辑软件引入射流研究…数字小键盘的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。