vue input组件,vue 对话框组件
这篇文章主要为大家详细介绍了某视频剪辑软件输入框组件开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件输入框组件开发过程的具体代码，供大家参考，具体内容如下
input-number.js
函数isValueNumber(值){
return(/(^-？[0-9] \.{1}\d $)(^-？[1-9]*$)(^-?0{1}$)/).测试（值"");
}
Vue.component(输入编号,{
模板："\
div类别=输入-数字\
输入\
类型=文本\
:值=当前值\
@change=handleChange\
@focus=keyControl\
按钮\
@click=handleDown \
:disabled=当前值=最小值-/button \
按钮\
@click=handleUp \
:disabled=当前值=最大值/button \
/div ，
数据：函数(){
返回{
当前值：这个值，
当前步骤：这个. parent.step
}
},
观察：{
当前值：函数（值){
这个. emit(input ，val)；
这个. emit(on-change ，val)；
},
值：函数（值){
这个。更新值(val)；
}
},
方法：{
handleDown: function(){
if(this.currentValue=this.min)返回；
这个。当前值-=this。当前步骤；
},
handleUp: function(){
if(this.currentValue=this.max)返回；
这个。当前值=这个。当前步骤；
},
更新值：函数(瓦尔){
如果(重视这个。max)val=this。max
如果(重视这个。min)val=this。min
this.currentValue=val
},
手柄变化：函数（事件){
var val=事件。目标。价值。trim()；
var max=this.max
var min=this.min
if(isValueNumber(val)) {
val=数字(val)；
this.currentValue=val
如果（最大值){
电流=最大值
}
if(val min) {
当前值=最小值
}
}否则{
//如果输入的不是数字，将输入的内容重置为之前的当前值
事件。目标。价值=这个。当前值；
}
},
keyControl: function(){
var _ this=this
$(窗口)。按键（功能(e){
if($( input ){
if(e.keyCode==38){
_这个。handle up()；
}
else if(e.keyCode==40){
_这个。处理down()；
}
}
});
}
},
已安装：函数(){
这个。updatevalue(这个。值)；
},
道具：{
最大：{
类型：数量，
默认值：无穷大
},
最小：{
类型：数量，
默认值：-无穷大
},
值：{
类型：数量，
默认值：0
},
步骤：{
类型：数量，
默认值：1
}
}
})
索引。射流研究…
var应用=新Vue({
埃尔： #app ，
数据：{
价值：5,
第十步
}
})
index.html
！声明文档类型
超文本标记语言
头
meta charset=utf-8 /
标题/标题
脚本src= js/jquery。js type= text/JavaScript charset= utf-8 /script
脚本src= js/vue。js type= text/JavaScript charset= utf-8 /script
/头
身体
div id=应用程序
输入数字v-model= value :max= 100 :min= 0 /输入数字
/div
脚本src= js/input-number。js type= text/JavaScript charset= utf-8 /script
脚本src= js/index。js type= text/JavaScript charset= utf-8 /script
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。