vue中多行文本标签_<vue-clamp>：轻松实现多行文本截断

轻松实现多行文本截断。

# 功能

可以选择限制行数与/或最大高度，无需指定行高。

支持在布局变化时自动更新。

支持展开/收起被截断部分内容。

支持自定义截断文本前后内容，并且进行响应式更新。

# Demo

最大行数 容器宽度 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另… 最大高度 容器宽度 展开内容 推荐 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

# 使用方法

$ npm i --save vue-clamp

对于基于 webpack 的项目，import 会自动引入未经转译的 ES Module 版本。请确保按如下指导配置相关工具。

#### Vue CLI v3

对于使用 Vue CLI 3 创建的项目，请确保将 vue-clamp 与 resize-detector 加入 vue.config.js 文件的 transpileDependencies 选项中：

module.exports = {

transpileDependencies: ['vue-clamp', 'resize-detector']

}

``` #### Vue CLI v2

如果使用的是 Vue CLI 2 的 `webpack` 模板，请按如下方式修改 `build/webpack.base.conf.js`：{

test: /\.js$/,

loader: 'babel-loader',include: [resolve('src'), resolve('test')]

include: [

resolve('src'),

resolve('test'),

resolve('node_modules/vue-clamp'),

resolve('node_modules/resize-detector')

]

}

在 Nuxt.js 中使用时，请确保将 `vue-clamp` 与 `resize-detector` 加入 `nuxt.config.js` 文件的 `build.transpile` 选项中：

module.exports = {

build: {

transpile: ['vue-clamp', 'resize-detector']

}

}

{{ text }}

```

# API

tag: string

生成的根元素的标签名。

默认值：div

autoresize: boolean

是否要自动适配根元素的尺寸变化。

默认值：false

max-lines: number

可以显示的最大行数

max-height: number|string

根元素的最大高度。数字值将被转换为 px 单位；字符串值将直接作为 CSS 属性 max-height 输出。

ellipsis: string

当文字被截断时需要显示的省略号字符串。

默认值：'…'

expanded: boolean

.sync

是否展开显式被截断的文本。

默认值：false

default

需要截断的文本。只能包含纯文本内容。

before

Slot 作用域：{ expand, collapse, toggle }

expand: function(): void - 展开被截断的文本。

collapse: function(): void - 收起展开后的文本。

toggle: function(): void - 切换被截断文本的展开状态。

在被截断的文本前显式的内容，可以包含任意类型内容。

after

Slot 作用域：与 before 相同。

在被截断的文本后显式的内容，可以包含任意类型内容。