Skip to content
a text-overflow vue component
Vue JavaScript
Branch: master
Clone or download
Latest commit 394553e Jul 19, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build init Jul 19, 2017
demo init Jul 19, 2017
dist init Jul 19, 2017
src init Jul 19, 2017
.babelrc init Jul 19, 2017
.eslintrc
.gitignore init Jul 19, 2017
index.js init Jul 19, 2017
package.json init Jul 19, 2017
postcss.config.js init Jul 19, 2017
readme.md init Jul 19, 2017

readme.md

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>
You can’t perform that action at this time.