Ellipsis与Tooltip文字提示组件封装EllipsisTip
source link: https://chegva.com/5491.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Ellipsis与Tooltip文字提示组件封装EllipsisTip
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>◎查看效果：
Recommend
-
26
I use grammarly.com to correct the articles from this blog given that English's not my primary language. In this app, if you set a longer title a document you will get the ellipsi...
-
21
什么是Ellipsis 在 Python 中你可能有时候会看到一个奇怪的用法，就像是这样： >>> ... Ellipsis
-
10
Ellipsis Article translated into 8 more languages Thursday, September 2, 2004 Just a quick note that my “What is the significance of Ellipsis” article has now been translated to quite a few languages. Here is what I wro...
-
12
Updated PrimalScript with Support for Ellipsis Wednesday, August 18, 2004 As pointed out by Chafic over at rewindlife, Sapien has a released a new version of
-
13
Installing English Ellipsis on Non-English versions of Flash Friday, July 30, 2004 If you are running a non-English version of Flash MX 2004, do not install the English version of the
-
4
What is the Significance of Ellipsis? Wednesday, July 28, 2004 As you probably know by now, we just released an update to Flash MX 2004. Code-na...
-
10
Flash Update (7.2 / Ellipsis) is Available Tuesday, July 27, 2004 Flash Update (7.2 / Ellipsis) is Available The second update to Flash MX 2004 is now
-
2
一个工具函数，实现页面tooltip组件的限制使用发布于 9 月 15 日有这样一个需求:页面已经写了太多的详情表单元素，并且每一个表单元素都使用了Tooltip...
-
23
Problem: Conditional Ellipsis without CSS I want to add an ellipsis to data that's brought in from a service without having to use CSS' text-overflow: ellipsis feature, since it's unreliable and could break overt...
-
5
Tooltip文字提示组件的开发代码示例 以下是一个简单的Tooltip文字提示组件的开发代码示例，使用了Vue.js框架： <template> <div class="tooltip" v-show="isVisible" v-bind:style="{ top: `${offsetY}px`, left...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK