<template>
    <el-tooltip :disabled="disabled" :content="content" :effect="effect" :placement="placement">
        <el-button :size="size" :class="disabled ? normalClass : 'text-disabled'" :type="type"
            @click.stop="handleClick">{{ text }}
        </el-button>
    </el-tooltip>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: ''
        },
        normalClass: {
            type: String,
            default: ''
        },
        text: {
            type: String,
            default: ''
        },
        size: {
            type: String,
            default: 'mini'
        },
        type: {
            type: String,
            default: 'text'
        },
        effect: {
            type: String,
            default: 'dark'
        },
        placement: {
            type: String,
            default: 'top'
        }
    },
    methods: {
        handleClick() {
            this.$emit('click')
        }
    }
}
</script>

<style lang="scss" scoped>
.text-disabled {
    color: #C0C4CC !important;
    cursor: not-allowed !important;
}
</style>