网站的推广和优化方案,注册公司的网站,生成静态网站,无锡企业免费建站代码见文末
vue3实现
最开始就用的vue3实现#xff0c;如下
Vue3实现方式
vue2开发和使用文档
组件功能
TooltipText 是一个文字展示组件#xff0c;具有以下功能#xff1a;
文本显示#xff1a;支持单行和多行文本显示。自动判断溢出#xff1a;判断文本是否溢出…代码见文末
vue3实现
最开始就用的vue3实现如下
Vue3实现方式
vue2开发和使用文档
组件功能
TooltipText 是一个文字展示组件具有以下功能
文本显示支持单行和多行文本显示。自动判断溢出判断文本是否溢出根据溢出情况显示 tooltip。自定义样式可以通过 props 修改文本样式和 Tooltip 样式。行数限制支持多行文本显示超出部分通过行数限制显示省略号。 使用方法 引入组件 将 TooltipText 注册到你的 Vue 项目中 import TooltipText from ./TooltipText.vue;export default {components: {TooltipText,},
};组件模板示例 templateTooltipText:content这是一个演示文本。:lineClamp2:maxWidth300:tooltipOptions{placement: top,effect: light,trigger: hover,}:outStyle{ color: #333, fontSize: 16px }/
/template传入参数 属性名类型默认值说明tooltipOptionsObject{ content: Bottom center, placement: bottom, effect: dark, trigger: hover }Tooltip 的配置选项参考 Element UI 的配置。outStyleObject{ fontSize: 14px }外部样式对象用于自定义文字样式。contentString显示的文本内容。lineClampNumber1显示的行数限制超出部分会显示省略号。maxWidthNumber0Tooltip 的最大宽度单位 px。 样式自定义 可通过 tooltipOptions 或 outStyle 自定义 Tooltip 和文字样式 :tooltipOptions{effect: light,placement: right,trigger: hover,
}
:outStyle{ fontSize: 18px, color: #555 }动态内容 内容变动后会自动检查溢出并更新 Tooltip 显示状态无需额外操作。 开发细节 溢出检查 单行文本通过 scrollWidth 和 clientWidth 比较实现。多行文本通过 scrollHeight 和 clientHeight 比较实现。 计算属性 computedMaxPopWidth 动态计算 Tooltip 的最大宽度默认为文字容器宽度的 50%。computedIfWrap 判断是否为多行文本根据 lineClamp 属性动态更新。 监听与更新 使用 watch 监听 content 的变动在内容更新后重新计算溢出状态。 样式 text-auto-nowrap单行文本样式自动截断显示省略号。text-auto-wrap多行文本样式支持行数限制。 注意事项
如果文本内容较长但设置了过小的 maxWidth可能导致 Tooltip 内容显示不全。若需要动态调整文本或 Tooltip 样式请确保 props 数据及时更新。
通过此组件可以轻松实现文本展示与溢出提示的功能并满足多样化的样式需求。
template!-- Tooltip and text display container --div!-- Tooltip element from Element UI --el-tooltipv-bindtooltipOptions !-- Bind tooltip options --:popper-class!toolTipShow ? hide-tooltip tooltip-popper : tooltip-popper !-- Conditionally apply tooltip classes --!-- Tooltip content slot --template #contentdiv classtooltip-content :style{ maxWidth: maxWidth || computedMaxPopWidth px } !-- Set maximum width for tooltip content --{{ content }} !-- Display tooltip content --/div/template!-- Text display with optional line clamp and styles --div:class{ text-auto-wrap: computedIfWrap, text-auto-nowrap: !computedIfWrap } !-- Apply wrapping styles based on computed value --reftextAutoRef !-- Reference for DOM access --:style{-webkit-line-clamp: lineClamp, !-- Apply line clamp for text --line-clamp: lineClamp, !-- Apply line clamp for text --...outStyle !-- Merge additional styles --}{{ content }} !-- Display main text content --/div/el-tooltip/div
/templatescript
export default {name: TooltipText,props: {// Tooltip options passed to Element UI el-tooltiptooltipOptions: {type: Object,default: () ({content: Bottom center,placement: bottom,effect: dark,trigger: hover,}),},// Additional styles for the text containeroutStyle: {type: Object,default: () ({fontSize: 14px,}),},// Text content to displaycontent: {type: String,default: ,},// Number of lines to clamp text tolineClamp: {type: Number,default: 1,},// Maximum width for tooltip contentmaxWidth: {type: Number,default: 0,},},data() {return {toolTipShow: false, // Whether to show the tooltiptextAutoRef: null, // Reference to the text container element};},computed: {// Compute the maximum width for the tooltip dynamicallycomputedMaxPopWidth() {if (this.$refs.textAutoRef) {return this.$refs.textAutoRef.clientWidth * 0.5; // Tooltip width is half of the text container width}return 100%; // Default to full width if reference is not available},// Determine if text wrapping should be applied based on lineClampcomputedIfWrap() {return this.lineClamp 1;},},watch: {// Watch for changes in content and re-check overflowcontent: {handler() {this.$nextTick(() {this.checkOverflow();});},immediate: true,},},methods: {// Check if the text content overflows its containercheckOverflow() {if (!this.$refs.textAutoRef) return;if (!this.computedIfWrap) {// Single-line text overflow checkthis.toolTipShow this.$refs.textAutoRef.scrollWidth this.$refs.textAutoRef.clientWidth;} else {// Multi-line text overflow checkthis.toolTipShow this.$refs.textAutoRef.scrollHeight this.$refs.textAutoRef.clientHeight;}},},mounted() {// Perform overflow check after component is mountedthis.$nextTick(this.checkOverflow);},
};
/scriptstyle langscss scoped.text-auto-nowrap {width: 100%;white-space: nowrap; !-- Prevent text wrapping --overflow: hidden; !-- Hide overflowing text --text-overflow: ellipsis; !-- Show ellipsis for overflow --text-align: left; !-- Align text to the left --}.text-auto-wrap {width: 100%;text-align: left; !-- Align text to the left --overflow: hidden; !-- Hide overflowing text --text-overflow: ellipsis; !-- Show ellipsis for overflow --display: -webkit-box; !-- Use a flex container for wrapping ---webkit-box-orient: vertical; !-- Set vertical orientation for line clamp --}
/stylestyle.hide-tooltip {visibility: hidden !important; !-- Hide the tooltip completely --}
/style
