1.0.4 • Published 4 years ago

v-directive-ellipsis v1.0.4

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

v-directive-ellipsis

基于vue2的自定义文本省略指令

  • 支持单行、多行省略,
  • 支持鼠标移入时,出现气泡框提示

在线示例 https://codesandbox.io/s/x9ike

安装

    npm install v-directive-ellipsis

or

    yarn add v-directive-ellipsis

注册

    import Vue from 'vue';
    import Ellipsis from 'v-directive-ellipsis';
    import 'v-directive-ellipsis/dist/ellipsis.css';

    Vue.directive('ellipsis', Ellipsis);

用法

    <!-- 单行 -->
    <div v-ellipsis="text">
      {{ text }}
    </div>
     <!-- 多行 -->
    <div v-ellipsis="{ placement: 'bottom', text, line:3 }">
      {{ text }}
    </div>

指令参数

参数说明类型默认值
text文本信息String
line行数Number1
placement气泡框位置, 可选:top top-left top-right left left-top left-bottom right right-top right-bottom bottom bottom-left bottom-rightStringtop
1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago