vue-ellipsis自定義文本省略支持
基于 Vue2 的自定義文本省略支持。
安裝
yarn add @hyjiacan/vue-ellipsis
or
npm install @hyjiacan/vue-ellipsis
用法
import ellipsis from '@hyjiacan/vue-ellipsis' Vue.use(ellipsis)
你需要通過CSS指定寬度
.ellipsis-style{
width: 200px;
}
.ellipsis-style{
max-width: 200px;
}
或通過 STYLE
<div style="width: 200px"></div> <ellipsis style="width: 200px"></ellipsis>
指令
v-ellipsis 的值表示顯示的行數(shù)，默認值為 1
修飾符
| 名稱 | 描述 |
|---|---|
| start | 使用前置省略模式 |
| middle | 使用中置省略模式 |
| end | 后置省略模式 |
| always | 不論是否被省略，始終顯示 title |
| none | 不論是否被省略，始終不不顯示 title |
| scale | 自動縮放(font-size)文本以適應(yīng)容器寬度, 此時 不會 省略文本 |
- 修飾符
start,middle,end是互斥的，只能指定其中一個 - 修飾符
always,none是互斥的，只能指定其中一個，留空時表示在省略時自動設(shè)置title
屬性
| 名稱 | 默認值 | 描述 |
|---|---|---|
| data-ellipsis | ... |
Default fill text (ellipsis like text) |
| data-delay | 200 |
表示處理的延時(毫秒) |
組件
屬性
| 名稱 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| fill | String | ... |
省略時的默認填充串 |
| position | String | end | 省略位置，可選值: start, middle, end |
| show-title | String | - | 是否顯示 title，可選值: always, none |
| rows | Number | 1 |
顯示的行數(shù) |
| scale | Boolean | false | 自動縮放(font-size)文本以適應(yīng)容器寬度, 此時 不會 省略文本 |
| content | String | end | 設(shè)置文本內(nèi)容，此時會忽略槽 default |
插槽
| 名稱 | 描述 |
|---|---|
| default | 內(nèi)容 |
評論
圖片
表情