Tooltip 文字提示：https://1x.antdv.com/components/tooltip-cn/
使用：<ellipsis-tip :length="14" :text="item.projectName"></ellipsis-tip> 默认文本保留长度 8，可以通过 :length 来设置，其余配置参数可以自行设置。
<template>
<a-tooltip v-if="showTooltip" :placement="placement" :overlayClassName="className" :trigger="trigger">
<template v-slot:title> {{ text }}</template>
{{ ellipsis(text) }}
</a-tooltip>
<span v-else>{{ text }}</span>
</template>
<script>
export default {
name: 'EllipsisTip',
props: {
// 文本显示内容
text: {
type: String,
required: true,
default: ''
},
// 文本保留长度
length: {
type: Number,
default: 8
},
// 气泡框位置
placement: {
type: String,
default: 'bottomLeft'
},
// 触发行为方式，默认hover
trigger: {
type: String,
default: 'hover'
},
// 自定义ClassName
className: {
type: String,
default: 'tooltop'
},
},
computed: {
showTooltip() {
return this.text.length > this.length
}
},
// 是否显示tooltip
// watch: {
// text() {
// console.log(this.text);
// }
// },
// created() {
// console.log(this.showTooltip);
// console.log(this.text);
// },
methods: {
/**
* @description: 截取字符串
* @param {string} value 要截取的字符串
* @return {string} 截取后的字符串
*/
ellipsis(value) {
if (!value) {
return "";
}
if (value.length > this.length) {
return value.slice(0, this.length) + "...";
}
return value;
}
},
};
</script>
<style scoped>
//控制主体颜色
.tooltop .ant-tooltip-inner {
color: #333 !important;
background-color: #fff !important;
// width: 500px;
}
//控制三角形颜色
.tooltip .ant-tooltip-placement-bottom .ant-tooltip-arrow::before,
.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow::before,
.ant-tooltip-placement-bottomRight .ant-tooltip-arrow::before {
background-color: #fff !important;
}
</style>◎查看效果：
