# vue-ellipsis

**Repository Path**: wangankeji-fe/vue-ellipsis

## Basic Information

- **Project Name**: vue-ellipsis
- **Description**: 基于 Vue2 的自定义文本省略支持
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 25
- **Forks**: 4
- **Created**: 2019-07-11
- **Last Updated**: 2024-12-10

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# vue-ellipsis

Customize ellipsis-like support for Vue2.

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

## Install

```bash
yarn add @hyjiacan/vue-ellipsis
```

or

```bash
npm install @hyjiacan/vue-ellipsis
```

## Usage

```javascript
import ellipsis from '@hyjiacan/vue-ellipsis'

Vue.use(ellipsis)
```

or

```javascript
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.

```css
.ellipsis-style {
    width: 200px;
}

.ellipsis-style {
    width: 80%;
}

.ellipsis-style {
    max-width: 200px;
}
```

or `STYLE`

```html

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