vue基础篇实战总结二：开发特殊的数字输入框组件

ok
还是一样 先把长相弄出来
(pug)HTML：

.container(style="margin-top:100px")
            .row
                #My_bt_compnont
                    input-number(v-model="value")

很简单吧！， 这个input-number标签就是我的自定义组件，下面js里会有别担心，如果对vue组件和props $emit传值不知道 就先去看看书吧 链接：https://pan.baidu.com/s/110W8Rv0ZtxpQdmh3UQNx8A
提取码：qwd1
然后绑定双向绑定value这个变量
ok，开始js的构建：这段话可以边看边看下面的代码从上往下 先是注册一个全局组件嘛，叫input-number，也就是我在上面用的标签，它的template也不复杂 就一个输入框加两个按钮
在输入框里面呢 绑定输入框里面的值等于currentvalue这个变量 注意！这里是没有触发计算属性的 亲测
然后监听三个事件 一个在这个输入框里面按下上和下分别执行值的增加和减少 然后监听change事件 一改变就执行改变的函数
很好理解吧。
下面减少的按钮 当currentvalue侦听属性返回的值小于最小值，那就不能使用了。
下面增加的按钮 同理
template就这么多
下面的props部分接收父组件传过来的值
前面三个都很好理解 最大最小和值
最后一个step是什么呢？就是一次增加或者减少的步伐吧 比如按一次加号 增加10 或者100 或者1000等等 随你高兴
好，接收的值就这样
下面是data部分，在自定义组件里面data部分是要用一个函数来弄的 返回的就是你要定义的变量吧理解成变量，这个变量currentvalue用来接收传过来的value 保存value的不变 操作这个currentvalue 操作完了如果要更新再更新
然后两个侦听属性 currentvalue和value 也很好理解
然后是 下面四个函数
分别是手动减少 手动增加 更新值 手动改变
然后在生命周期钩子mount里面 用来更新值 这里不清楚的可以百度一下mount钩子就好了 很简单的
目前先这样，后面慢慢一个一个搞定

Vue.component('input-number',{
    template:`
    <div class="input-number">
        <input 
            type="text"
            :value="currentValue"
            @keyup.up.prevent="handleUp"
            @keyup.down.prevent="handleDown"
            @change="handleChange">
        <button
            @click="handleDown"
            :disabled="currentValue <= min"> - </button>
        <button
            @click="handleUp"
            :disabled="currentValue >= max"> + </button>
    </div> 
    `,
    props:{
        min:{
            type:Number,
            default:-Infinity
        },
        max:{
            type:Number,
            default:Infinity
        },
        value:{
            type:Number,
            default:0
        },
        step:{
            type:Number,
            default:1
        }
    },
    data:function(){
        return{
            currentValue:this.value
        }
    },
    watch:{
        currentValue:function(){

        },
        value:function(){

        }
    },
    methods:{
        handleDown:function(){

        },
        handleUp:function(){

        },
        UpdateValue:function(){
            
        },
        handleChange:function() {
            
        }
    },
})

var My_bt_compnont = new Vue({
    el:'#My_bt_compnont',
    data:{
        value:5
    }
})

既然要传四个值 一个已经有了 双向绑定的value 剩下三个分别是 min max 和step
那就先在HTML把值传一下

.container(style="margin-top:100px")
            .row
                #My_bt_compnont
                    input-number(v-model="value" :min="0" :max="100" :step="10")

好，现在我就弄了最小值0 最大值100 步伐是10传到组件里面去
紧接着我们去完善一下侦听属性

 watch:{
        currentValue:function(val){
            //console.log("现在在currentvalue计算属性里面")
            this.$emit('input',val);
            this.$emit('on-change',val);
        },
        value:function(val){
           // console.log("在value计算属性里面")
            this.UpdateValue(val);
        }
    },

其实很简单当我改变输入框的值时，会调用下面的handlechange函数 然后调用currentValue再使用$emit函数传input事件和on-change事件给父组件 并且把值也传过去,
然后触发value，调用更新函数，然后currentvalue侦听检测一下,不过手动改的话应该和val是一样的，如果是点击加号和减号这个就有用了。

methods:{
        handleDown:function(){
            this.currentValue-=this.step;
            this.UpdateValue(this.currentValue);
        },
        handleUp:function(){
            this.currentValue+=this.step;
            this.UpdateValue(this.currentValue);
        },
        UpdateValue:function(val){
            if(val < this.min)val = this.min;
            if(val > this.max)val = this.max;
           // console.log("在更新函数里面val="+val)
           // console.log("在更新函数里面currentValue="+this.currentValue)
            this.currentValue = val;
            /*当val的值没有经过上面两句的修改时 
            currentvalue是和val一样的 一样的话是不会触发侦听属性的，
            当变量改变时才触发侦听属性!!!!!!!!!!!!!*/
        },
        handleChange:function(event) {
            //console.log("进入函数")
            let val = event.target.value.trim();//去空格
            val = Number(val);
            this.currentValue = val;
			
        }
    },

好了，这样一个自定义的数字输入框就成功了，想要加什么功能以后也可以直接加在这个vue变量里面

最后

以上就是落后康乃馨为你收集整理的vue基础篇实战总结二：开发特殊的数字输入框组件的全部内容，希望文章能够帮你解决vue基础篇实战总结二：开发特殊的数字输入框组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。