vue-paragraph v0.2.4

vue-paragraph

更多API和建议，请参阅文档

npm install vue-paragraph

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

示例： Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果；文本超出后，显示Tooltip，文本未超出，不显示Tooltip。

文本展开收起,文本溢出Tooltip,Vue,ElementUI,Tooltip 1. expandable模式(默认) - 文本展开收起效果：

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

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

• 文本超出后，显示Tooltip

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

• 文本超出后，显示Tooltip 文本未超出，不显示Tooltip

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

3. 文本未超出，不显示Tooltip

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

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