手把手教你封装一个数字框组件

最新推荐文章于 2023-10-30 16:57:49 发布

阿姐y

最新推荐文章于 2023-10-30 16:57:49 发布

阅读量180

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qrbd4558/article/details/115856901

版权

js 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

父组件：

      <input-number v-model="number" :min="min" :max="max"></input-number>

子组件

<template>
    <div>
        <input :value="currentnumber" @change="handleChange" />
        <button v-on:keyup.up="handleUp" @click="handleUp" :disabled="currentnumber >= max">+</button>
        <button @click="handleDown" :disabled="currentnumber <= min">-</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentnumber: this.value
        };
    },
    props: {
        value: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: -Infinity
        }
    },
    components: {

    },
    watch: {
        value: function (val, oldvalue) {
            this.checknumber(val);
        },
        currentnumber: function (val, oldvalue) {
            this.$emit('input', val);
        }

    },
    computed: {

    },

    methods: {
        handleChange(event) {
            var val = event.target.value;
            this.currentnumber = val;
            if (val > this.max) {
                this.currentnumber = this.max;
            } else if (val < this.min) {
                this.currentnumber = this.min;
            }
        },
        handleUp() {
            if (this.currentnumber >= this.max) return;
            this.currentnumber += 1;
        },
        handleDown() {
            if (this.currentnumber <= this.min) return;
            else this.currentnumber--;
        },
        // 检验数据是否符合规范
        checknumber(data) {
            if (data > this.max) data = this.max;
            if (data < this.min) data = this.min;
            this.currentnumber = data;
        }
    },
    mounted: function () {
        // 初始进行数据检测
        this.checknumber(this.value);
    },
}

</script>
<style lang='scss' scoped>
</style>