Vue 组件 - 多功能按钮操作组件 (operationButton)

<template>
    <div class="operationButtonBox" :style="styles">
        <div :class="['operationButton', 'operationButton_divide', icon]" @click="operationButtonClick"></div>
        <div :class="['operationButton_item', {'operationButton_displayIB': show}, item.icon,]"  @click="operationButton_itemClick(item, index)" v-for="item, index in list" :key="index"></div>
    </div>
</template>
<script>
    export default {
        name: "operationButton",
        props: {
            icon: {
                type: String,
                default: () => "el-icon-setting"
            },
            size: {
                type: String,
                default: "30px",
            },
            color: {
                type: String,
                default: "#1a2742",
            },
            ty: {
                type: String,
                default: "-35px",
            },
            list: {
                type: Array,
                default: () => [
                    { id: 1, icon: 'el-icon-circle-plus-outline' },
                    { id: 2, icon: 'el-icon-edit' },
                    { id: 3, icon: 'el-icon-delete' },
                    { id: 4, icon: 'el-icon-delete' },
                    { id: 4, icon: 'el-icon-delete' },
                    { id: 4, icon: 'el-icon-delete' },
                ]
            },
            angle: {
                type: Number,
                default: -60,
            },
        },
        created() {
            this.styles = {};
        },
        data() {
            return {
                show: false,
                styles: {
                    "--size": this.size,
                    "--color": this.color,
                    "--ty": this.ty,
                    "--angle": this.angle,
                },
            }
        },
        methods: {
            operationButtonClick() {
                this.show = !this.show;
            },
            operationButton_itemClick(item, index) {
                this.$emit('change', { ...item, index });
            },
        }
    }
</script>
<style lang="scss" scoped>
$operationButtonWH: var(--size); //圆的大小
$operationButtonColor: var(--color); // 圆的图标颜色
$ty: var(--ty); //偏移Y轴高度
$angle: var(--angle); //默认第一按钮位置角度
$num: floor(360 / (abs($angle)) + 2); //多少个数量
@for $val from 1 to $num {
    .operationButton_item:nth-child(#{$val}) {
        transform: rotate($angle + (abs($angle) * ($val - 2)) + deg) translateY($ty) rotate(abs($angle) + ($angle * ($val - 2)) + deg);
    }
}
.operationButtonBox {
    width: $operationButtonWH;
    height: $operationButtonWH;
    display: inline-block;
    position: relative;
}
.operationButton_divide {
    position: relative;
    border: 1px solid $operationButtonColor;
}
.operationButton {
    display: inline-block;
    box-sizing: border-box;
    width: $operationButtonWH;
    height: $operationButtonWH;
    // border-radius:50%;
    text-align: center;
    line-height: 30px;
    color: $operationButtonColor;
    user-select: none;
    cursor: pointer;
    transition: all 1s ease-in 3ms;
    &_item {
        @extend .operationButton;
        border: 1px solid #c1c1c1;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
    // 点击添加这个属性
    &_displayIB {
        opacity: 1;
    }
}
</style>