网站首页 Vue 正文

Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果

作者：五虎战画戟更新时间： 2022-04-23 Vue

示例：

1. expandable模式(默认) - 文本展开收起效果：

2. tooltip模式 - 文本使用Tooltip效果：

3. tooltipExpandable模式 - 文本同时使用Tooltip和展开收起效果：

API

Content Attributes

Tooltip Attributes

Slot

代码资源：vue-paragraph - npm

参数	说明	类型	可选值	默认值
content	显示的内容，也可以通过 `slot` 传入 DOM	String	必填	—
maxLines	最多展示的行数	String, Number	—	3
unfoldText	展开按钮文本	String	—	展开
foldText	收起按钮文本	String	—	收起
textStyle	展开收起按钮样式	String	—	color: #1890ff;
type	组件类型	String	expandable / tooltip / tooltipExpandable 请看【示例】	expandable
contentWidth	内容宽度	String, Number	—
tooltipAttrs	提示工具条属性	Object	Tooltip Attributes

width	tooltip宽度	String, Number	—	最小宽度 150px
effect	默认提供的主题	String	dark/light	dark
placement	出现位置	String	top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end	top
disabled	Tooltip 是否可用	Boolean	—	false
value / v-model	状态是否可见	Boolean	—	false
offset	出现位置的偏移量	Number	—	0
transition	定义渐变动画	String	—	fade-in-linear
visible-arrow	是否显示 Tooltip 箭头，更多参数可见Vue-popper	Boolean	—	true
popper-options	popper.js 的参数	Object	参考 popper.js 文档	`{ boundariesElement: 'body', gpuAcceleration: false }`
popper-class	为 popper 添加类名	String	—	—
open-delay	触发方式为 hover 时的显示延迟，单位为毫秒	Number	—	—
close-delay	触发方式为 hover 时的隐藏延迟，单位为毫秒	number	—	200
tabindex	Popover 组件的 tabindex	number	—	0

参数	说明
—	Popover 内嵌 HTML 文本
reference	触发 Popover 显示的 HTML 元素

$ npm install vue-paragraph

import Paragraph from 'vue-paragraph'
Vue.use(Paragraph)

原文链接：https://blog.csdn.net/qq_41887214/article/details/116663975