封装组件---抽屉内的单选封装

最新推荐文章于 2024-08-07 15:33:27 发布

阿陆陆陆

最新推荐文章于 2024-08-07 15:33:27 发布

阅读量177

点赞数

文章标签： vue.js node.js es6

本文链接：https://blog.csdn.net/qq_42546652/article/details/106374532

版权

封装组件之--抽屉功能内的单选功能

// 抽屉单选
<template>
    <div class="drawColumn row-start">
        <el-form-item :label="label" class="row-start drawRadio">
            <div class="row-start statusArea">
                <!--  启用按钮 -->
                <div :class="isyesActive" @click="changeStatus(1)">启用</div>
                <!-- 禁用按钮 -->
                <div :class="isnoActive" @click="changeStatus(0)">禁用</div>
            </div>
        </el-form-item>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status: "",
            isnoActive: "radio no ml33",
            isyesActive: "radio yse"
        };
    },
    props: {
        // 前缀
        label: {
            type: String,
            default: "加载中..."
        },
        // 绑定值
        value: {
            default: 1
        }
    },
    methods: {
        // 点击启用
        changeStatus(status) {
            this.changeClass(status);
            this.status = status;
        },
        // 发出状态
        sendStatus() {
            this.$emit("sendStatus", this.status);
        },
        // 改变class
        changeClass(status) {
            if (status == 0) {
                this.isnoActive = "radio no ml33 noActive";
                this.isyesActive = "radio yes";
            } else {
                this.isnoActive = "radio no ml33";
                this.isyesActive = "radio yes yesActive";
            }
        }
    },
    watch: {
        value(val) {
            this.changeClass(val);
            this.status = val;
        }
    },
    created() {
        this.changeClass(this.value);
        this.status = this.value;
    }
};
</script>

<style lang="scss" scoped>
.radio {
    width: 1rem;
    height: 0.4rem;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.4rem;
    cursor: pointer;
}
.yes {
    color: #099a09;
    border: 0.01rem solid #099a09;
    &:hover {
        color: #fff;
        background: #099a09;
    }
}
.no {
    color: #ba0d0d;
    border: 0.01rem solid #ba0d0d;
    &:hover {
        color: #fff;
        background: #ba0d0d;
    }
}
.yesActive {
    color: #fff;
    background: #099a09;
}
.noActive {
    color: #fff;
    background: #ba0d0d;
}
</style>