代码拉取完成,页面将自动刷新
同步操作将从 网安科技前端组/vue-ellipsis 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Customize ellipsis-like support for Vue2.
Samples: https://hyjiacan.github.io/vue-ellipsis/
yarn add @hyjiacan/vue-ellipsis
or
npm install @hyjiacan/vue-ellipsis
import ellipsis from '@hyjiacan/vue-ellipsis'
Vue.use(ellipsis)
or
import {ellipsisDirective, ellipsisComponent} from '@hyjiacan/vue-ellipsis'
// For directive usage
Vue.directive(ellipsisDirective.name, ellipsisDirective)
// For component usage
Vue.component(ellipsisComponent.name, ellipsisComponent)
// Use one of above makes it works.
You should specify the width via CSS.
.ellipsis-style{
width: 200px;
}
.ellipsis-style{
width: 80%;
}
.ellipsis-style{
max-width: 200px;
}
or STYLE
<div style="width: 200px"></div>
<ellipsis style="width: 80%"></ellipsis>
<ellipsis style="width: 200px"></ellipsis>
v-ellipsis
is the rows, default value: 1
, set 0
to show all text.name | description |
---|---|
start | Show ellipsis as prefix |
middle | Show ellipsis in the middle |
end | Show ellipsis as suffix |
always | ALWAYS show title while text overflow |
none | DO NOT show title while text overflow |
scale | Auto scale (font-size ) text to fit container width, WON'T ellipsis |
start
, middle
, end
are mutex, you should specify only one of them (default: end
).always
, none
are mutex, you should specify only one of them,
or leave it empty(Set title
when there is an ellipsis, just like auto
for property showTitle
).name | default | description |
---|---|---|
data-ellipsis | ... |
Default fill text (ellipsis like text) |
data-delay | 200 |
the delay(milliseconds) for making ellipsis |
name | type | default | description |
---|---|---|---|
fill | String | ... |
Default fill text (ellipsis like text) |
position | String | end | Ellipsis position, options: start , middle , end
|
show-title | String | - | options: always , none , auto (default) |
rows | Number | 1 |
Number of rows, set 0 to show all text |
scale | Boolean | false | Auto scale (font-size ) text to fit container width, DO NOT ellipsis |
content | String | end | The content, makes the slot default ignored |
name | description |
---|---|
default | The content |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。