vue 输入框,vue 自定义input组件

　　这篇文章主要为大家详细介绍了某视频剪辑软件自定义数字输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　最近自己在练习组件开发，做了一个简单的数字输入框加减的组件，效果图如下：

　　组件可以传入三个参数，值是初始化值，最大是可输入的最大值，最小值是可输入最小值，当然参数可以按需求继续扩展的。

　　组件代码如下：

　　模板

　　div style= text-align:center；上边距：20px

　　输入类型= text v-model=当前值 @ change=处理更改

　　button @ click= hand up :disabled= current value=max /按钮

　　button @ click=手柄向下:disabled=当前值=最小值-/button

　　/div

　　/模板

　　脚本

　　导出默认值{

　　道具：[max ， min ， value]，

　　名称：我的输入，

　　data(){

　　返回{

　　当前值：这个值

　　}

　　},

　　观察：{

　　当前值：函数(val){//当前值值变动就向父组件传值

　　这个. emit(input ，val)；

　　这个. emit(on-change ，val)；

　　},

　　值：函数(val) { //对值进行验证

　　这个。updata value(val)；

　　}

　　},

　　已安装(){

　　这个。updatavalue(这个。值)；

　　},

　　方法：{

　　handleDown: function () { //加法

　　如果(这个。当前值=这个。最小){

　　返回；

　　}否则{

　　这个。当前值-=1；

　　}

　　},

　　handleUp: function () { //减法

　　如果(这个。当前值=这个。最大){

　　返回；

　　}否则{

　　这个。当前值=1；

　　}

　　},

　　更新值：函数(瓦尔){

　　if(val this.max){val=this.max}

　　if(val this.min){val=this.min}

　　this.currentValue=val

　　},

　　手柄变化：函数（事件){ //对值进行验证

　　var val=事件。目标。价值。trim()；

　　var max=this.max

　　var min=this.min

　　if(this.isNumber(val)){

　　val=数字(val)；

　　this.currentValue=val

　　如果（最大值){

　　this.currentValue=max

　　}else if(val min){

　　this.currentValue=min

　　}

　　}否则{

　　这个。当前值=0；

　　}

　　},

　　isNumber:函数（值){

　　返回(/^\-?[0-9] $/).测试（值"");

　　}

　　}

　　}

　　/脚本

　　样式范围

　　输入{

　　宽度：280像素

　　高度：36px

　　填充：0 10px

　　边框：1px纯色# ccc

　　边框-半径：4px

　　}

　　按钮{

　　边框：无；

　　背景：# 4e83e4

　　颜色：# fff

　　高度：36px

　　宽度：36px

　　}

　　/风格

　　调用组件就很简单了，如下：

　　模板

　　差异

　　氘数字输入框组件/h2

　　！马克斯是可输入的最大值部是可输入的最小值价值是初始值-

　　我的输入垂直模型=值:最大值= 10 :最小值=-5 /我的输入

　　p style= text-align:center；button @click=doAlert(value)输入框的值是/button/p

　　/div

　　/模板

　　脚本

　　从导入我的输入./组件/我的输入。vue ；

　　导出默认值{

　　名称：计算机编号，

　　组件：{MyInput}，

　　data(){

　　返回{

　　值：1

　　}

　　},

　　方法：{

　　doAlert:函数(瓦尔){

　　警报(val)；

　　}

　　}

　　}

　　/脚本

　　组件做的很简单，欢迎大家一起交流。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。