<template>
    <el-tooltip class="span-tip" :content="content" :placement="placement" effect="light" :disabled="disabled">
        <div :class="contentClass">
            <slot v-if="$slots.default"></slot>
            <span v-else>{{ showContent }}</span>
        </div>
    </el-tooltip>
</template>

<script>
export default {
    name: "seSpanTip",
    data() {
        return {}
    },
    mounted() {
    },
    props: {
        /* 字符内容 */
        content: {
            type: String,
            default: ''
        },
        /* tip位置 */
        placement: {
            type: String,
            default: 'top'
        },
        /* 最大显示长度 */
        contentLength: {
            type: Number,
            default: 0
        },
        /* 最大显示行数 1,2,3*/
        clampLine: {
            type: Number,
            default: 1
        }
    },
    computed: {
        showAll() {
            if (this.contentLength === 0) {
                return true;
            } else return this.contentLength >= this.content.length;
        },
        contentClass() {
            if (this.contentLength) {
                return {};
            } else {
                let cla = {
                    "text-abbreviations": true,
                }
                cla["text-abbreviations" + this.clampLine] = true;
                return cla;
            }
        },
        showContent() {
            return this.showAll ? this.content : this.content.substr(0, this.contentLength) + '...'
        },
        disabled() {
            return this.showAll && this.contentLength > 0
        }
    },
    methods: {}

}
</script>

<style lang="less" scoped>
.span-tip{
    display: inline;
}
.text-abbreviations {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.text-abbreviations1 {
    -webkit-line-clamp: 1;
}

.text-abbreviations2 {
    -webkit-line-clamp: 2;
    //text-align: left;
}

.text-abbreviations3 {
    -webkit-line-clamp: 3;
    //text-align: left;
}
</style>
