# ele-extellipsis
> 1. 一个实现在文本溢出后浮现Tooltip，文本不溢出则不显示Tooltip的Vue组件；2. 还可以做文本展开收起效果
Latest version **0.1.1** (published 2022-01-06) · ISC license · 0 weekly downloads
## Install
```sh
npm install ele-extellipsis
pnpm add ele-extellipsis
yarn add ele-extellipsis
bun add ele-extellipsis
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-01-06 |
| First published | 2022-01-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 302.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | lhywork@aliyun.com |
| Maintainers | lhywork |
| Keywords | 文本展开收起, 文本溢出, 文本省略, 多行文本, textellipsis, ele-extellipsis |
## Links
- npm: https://www.npmjs.com/package/ele-extellipsis
- Repository: https://gitee.com/lhywork/ele-extellipsis
- Issues: https://gitee.com/lhywork/ele-extellipsis/issues
- npm.io page: https://npm.io/package/ele-extellipsis
## Dependencies (3)
- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.4.5
## Recent versions
- 0.1.1 (latest) — 2022-01-06
- 0.1.0 — 2022-01-06
## README
# ele-extellipsis
### 更多API和建议，请参阅文档
```
npm install ele-extellipsis
```
```vue
import TextEllipsis from 'ele-extellipsis'
Vue.use(TextEllipsis)
```
示例：
Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果；文本超出后，显示Tooltip，文本未超出，不显示Tooltip。
文本展开收起,文本溢出Tooltip,Vue,ElementUI,Tooltip
1. expandable模式(默认) - 文本展开收起效果：
```vue
```
2. tooltip模式 - 文本使用Tooltip效果：
- 文本超出后，显示Tooltip
```vue
```
- 文本超出后，显示Tooltip 文本未超出，不显示Tooltip
```vue
```
3. 文本未超出，不显示Tooltip
- tooltipExpandable模式 - 文本同时使用Tooltip和展开收起效果：
```vue
```
## 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](https://github.com/element-component/vue-popper) | Boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | 为 popper 添加类名 | String | — | — |
| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
| tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
### Slot
| 参数 | 说明 |
| --------- | ----------------------------- |
| — | Popover 内嵌 HTML 文本 |
| reference | 触发 Popover 显示的 HTML 元素 |
---
_Source: https://npm.io/package/ele-extellipsis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._