ele-extellipsis

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

npm install ele-extellipsis

import TextEllipsis from 'ele-extellipsis'
Vue.use(TextEllipsis)

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

文本展开收起,文本溢出Tooltip,Vue,ElementUI,Tooltip

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

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

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

• 文本超出后，显示Tooltip

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

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

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

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

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

<TextEllipsis
    content="使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例使用示例"
  :max-lines="1"
  :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 元素 |