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

目录

示例： 

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

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

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

API

​​​​​​Content Attributes

Tooltip Attributes 

Slot

代码资源：vue-paragraph - npm

---

示例： 

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

<Paragraph
  content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
  :max-lines="1"
  :content-width="400"
/>

---

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

• 文本超出后，显示T​​​​​ooltip

​

文本超出后，显示T​​​​​ooltip

<Paragraph
  content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
  :max-lines="1"
  :content-width="400"
  type="tooltip"
/>

•  文本未超出，不显示T​​​​​ooltip

​

文本未超出，不显示T​​​​​ooltip

<Paragraph
  content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
  :max-lines="3"
  :content-width="400"
  type="tooltip"
/>

---

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

<Paragraph
  content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
  :max-lines="1"
  :content-width="400"
  type="tooltipExpandable"
/>

API

Content Attributes

参数	说明	类型	可选值	默认值
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

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

Slot

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

代码资源：vue-paragraph - npm

$ npm install vue-paragraph

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