cellsysArt/components/TipIconButton/index.vue

<template>
    <el-tooltip
        :disabled="tipDisabled"
        effect="dark"
        :content="tipText"
        :placement="tipPlacement"
        :enterable="false">
        <button
            type="button"
            v-if="!disabled"
            class="tip-button themeBgColor"
            :class="[
                { 'tip-button--circle': circle },
                { 'is-disabled': disabled },
                { 'border-shadow': shadow },
            ]"
            :style="bgStyle"
            v-bind="$attrs">
            <v-svg
                class-name="svg-btn themeColor"
                :icon-name="iconName"
                :class="[iconSize ? 'tip-icon--' + iconSize : 'tip-icon--default']"
                :style="iconColorStyle"></v-svg>
        </button>
        <!-- 使用这种方式来实现按钮disable是为了在按钮disable的时候也能显示提示信息-->
        <button
            type="button"
            v-else
            disabled
            class="tip-button themeBgColor"
            :class="[
                { 'tip-button--circle': circle },
                { 'is-disabled': disabled },
                { 'border-shadow': shadow },
            ]"
            :style="bgStyle"
            v-bind="$attrs">
            <v-svg
                class-name="svg-btn themeColor"
                :icon-name="iconName"
                :class="[iconSize ? 'tip-icon--' + iconSize : 'tip-icon--default']"
                :style="iconColorStyle"></v-svg>
        </button>
    </el-tooltip>
</template>

<script>
import VSvg from '../icon/VSvg';

export default {
    name: 'TipIconButton',
    components: { VSvg },
    props: {
        iconName: {
            type: String,
            required: true,
        },
        color: String,
        bgColor: String,
        tipText: String,
        disabledTip: Boolean,
        disabled: Boolean,
        size: String,
        // border: Boolean,
        placement: String,
        shadow: Boolean,
        plain: Boolean,
        circle: Boolean,
    },
    computed: {
        tipDisabled() {
            return this.tipText ? false : true;
        },
        iconSize() {
            return this.size || 'default';
        },
        iconColorStyle() {
            //return this.color || this.defaultColor
            if (this.color) {
                return { color: this.color + '!important' };
            } else {
                if (!this.plain) {
                    //不是plain的情况下返回白色color，是plain的情况下返回主题色
                    return { color: '#ffffff!important' };
                }
            }
        },
        tipPlacement() {
            return this.placement || 'top';
        },
        bgStyle() {
            if (this.bgColor) {
                return {
                    'background-color': this.bgColor + '!important',
                };
            } else {
                return {};
            }
        },
        // backgroundColor() {
        //     return this.plain ? this.bgColor : this.bgColor || '#409eff'
        // },
        // defaultColor() {
        //     return this.plain ? '#409eff' : '#ffffff'
        // }
    },
    data() {
        return {};
    },
    created() {
        if (!this.tipText) {
            this.disable = true;
        } else {
            this.disable = this.disabledTip;
        }
    },
};
</script>

<style scoped>
.tip-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    border-radius: 3px;
    padding: 5px;
}

.tip-button + .tip-button {
    margin-left: 5px;
}

.tip-button .svg-btn {
    display: block;
    opacity: 1;
    vertical-align: middle;
    margin: 0 auto;
}

.tip-button:hover,
.tip-button:hover .svg-icon {
    opacity: 0.85;
}

.tip-button--circle {
    border-radius: 50%;
}

.bip-button--border {
    border-width: 1px;
    border-style: solid;
    border-color: #409eff;
    border-radius: 4px;
    padding: 4px;
}

.bip-button--border:hover {
    background-color: #ecf5ff;
}

.border-shadow {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.is-disabled,
.is-disabled:hover {
    cursor: not-allowed;
    opacity: 0.65;
}

.is-disabled .svg-btn,
.is-disabled:hover .svg-btn {
    cursor: not-allowed;
    opacity: 0.8;
}

.tip-icon--mini {
    font-size: 14px;
}

.tip-icon--default {
    font-size: 16px;
}

.tip-icon--medium {
    font-size: 20px;
}

.tip-icon--small {
    font-size: 24px;
}

.tip-icon--large {
    font-size: 28px;
}
</style>