Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ellipsis 组件

基于vue2.0的【展开、收起】组件 为了更好的实现多文本能够按指定行数显示,并通过配置两个按钮进行展开与折叠。

效果

安装

npm install -D ellipsis-plus

使用

import Ellipsis from 'ellipsis-plus'
Vue.component(Ellipsis.name, Ellipsis)

参数说明

  • text

String ,待显示的文本

  • line

显示的行数,默认为2

  • showButton

是否显示组件内置按钮。默认为true

  • expandText

展开按钮的文案

  • collapseText

收起按钮的文案

  • ellipsis

自定义省略符号,默认为...

<div>
  <h6>采用组件默认按钮</h6>
  <ellipsis-plus  ref="moreDemo" :text="text" :line="2">
  </ellipsis-plus>
</div>
<div>
  <h6>自定义按钮文字</h6>
  <ellipsis-plus ref="noButton" expand-text='哈哈'   :text="text" :line="2">
  </ellipsis-plus>
</div>
<div>
  <h6>在组件外部定义按钮</h6>
  <ellipsis-plus ref="noButton"   :show-button="false" :text="text" :line="2">
  </ellipsis-plus>
  <button class="outer-button" @click="expand">{{btnTxt}}</button>
</div>
<div>
  <h6>自定义省略符</h6>
  <ellipsis-plus  ref="moreDemo" :ellipsis="'。。。'" :text="text" :line="2">
  </ellipsis-plus>
</div>
<div>
  <h6>不带省略符</h6>
  <ellipsis-plus  ref="moreDemo" :ellipsis="''" :text="text" :line="2">
  </ellipsis-plus>
</div>

About

a text-overflow vue component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published