vue-ellipsis

Customize ellipsis-like support for Vue2.

Samples: https://hyjiacan.github.io/vue-ellipsis/

Install

yarn add @hyjiacan/vue-ellipsis

or

npm install @hyjiacan/vue-ellipsis

Usage

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>

Directive

• The value of directive v-ellipsis is the rows, default value: 1 , set 0 to show all text.

Since 1.2.0

While modifier scale is specified, the value of directive should in form of {min: 0, max: 40}, it's the limit of fontsize to scale。

When the scale modifier is specified, the value format should be {min: 0, max: 40}, which indicates that it no longer represents the number of lines, but rather the range of font-size that are allowed to scale.

Modifiers

| 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 |

• Modifiers start, middle, end are mutex, you should specify only one of them (default: end).
• Modifiers 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).

Attributes

| name | default | description | |---------------|---------|---------------------------------------------| | data-ellipsis | ... | Default fill text (ellipsis like text) | | data-delay | 200 | the delay(milliseconds) for making ellipsis |

Component

Props

| 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|{min: 0, max: 40} | false | Auto scale (font-size) text to fit container width, DO NOT ellipsis | | content | String | end | The content, makes the slot default ignored |

Slots

| name | description | |---------|-------------| | default | The content |

FAQ

1. Q: I have an element with padding by percentage, got unexpected display ? A: Padding by percentage is not supported for now.