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.

Modifiers

• 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

Component

Props

Slots

FAQ

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