vue 练习（prop、emit、watch）-数字输入框

最新推荐文章于 2024-05-24 09:29:15 发布

guanqingchao

最新推荐文章于 2024-05-24 09:29:15 发布

阅读量854

点赞数

分类专栏： vue 文章标签： vue练习

本文链接：https://blog.csdn.net/guanqingchao/article/details/80621413

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字输入框</title>
</head>
<body>
    <div id="app">
        <input-number v-model="value" :max="10" :mix="0"></input-number>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script> 
    <script >

function isValueNumber(value){
    return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+'');
}
Vue.component('input-number',{
    template:'\
        <div class="input-number">\
            <input type="text" @change="handChange" :value="currentValue">\
            <button @click="handDown" :disabled="currentValue <= min">-</button>\
            <button @click="handUp" :disabled="currentValue >= max">+</button>\
        </div>',
    props:{
        max:{
            type:Number,
            default:Infinity
        },
        min:{
            type:Number,
            default:-Infinity
        },
        value:{
            type:Number,
            default:0
        }
    },
    data:function(){
        return {
            currentValue: this.value
        }
    },
    //watch用来监听prop或data的改变，触发watch配置的函数
    watch:{
        currentValue:function(val){
            //使用v-model时改变value
            this.$emit('input',val);
            //触发自定义事件on-change,告知父组件数字值有改变（本例中没有使用该事件）
            this.$emit('on-change',val);
        },
        value:function(val){
            this.upDateValue(val);
        }
    },
    methods:{
        upDateValue:function(val){
            if(val>this.max) val = this.max;
            if(val<this.min) val = this.min;
            this.currentValue = val;
        },
        handDown(){
            if(this.currentValue <= this.min) return ;
            this.currentValue -= 1;
        },
        handUp(){
            if(this.currentValue >= this.max) return ;
            this.currentValue += 1;
        },
        handChange(ev){
            var val = ev.target.value.trim();
            var max = this.max;
            var min = this.min;
            if(isValueNumber(val)){
                val = Number(val);
                this.currentValue = val ;
                if(val>max){
                    this.currentValue = max;
                } else if(val<min){
                    this.currentValue = min;
                }
            } else {
                ev.target.value = this.currentValue;
            }
        }       
    },
    //初始化时对value进行过滤
    mounted () {
        this.upDateValue(this.value);
    }
})
        var app = new Vue({
        el:"#app",
        data:{
            value:5
        }
    }) 
    </script>

</body>

</html>

guanqingchao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 练习（prop、emit、watch）-数字输入框

“` 数字输入框 function isValueNumber(value){ return (/(^-?[0-9]+.{1}\d+)|(−?[1−9][0−9]∗)|(−?[1−9][0−9]∗)|(^-?[1-9][0-9]*)|(^-?0{1}$...
复制链接

扫一扫