<vue-clamp>

轻松实现多行文本截断。

GitHub →

# 功能

可以选择限制行数与/或最大高度，无需指定行高。
支持在布局变化时自动更新。
支持展开/收起被截断部分内容。
支持自定义截断文本前后内容，并且进行响应式更新。

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

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

module.exports = {
  build: {
    transpile: ['vue-clamp', 'resize-detector']
  }
}

<template>
<v-clamp autoresize :max-lines="3">{{ text }}</v-clamp>
</template>

<script>
import VClamp from 'vue-clamp'

export default {
  components: {
    VClamp
  },
  data () {
    return {
      text: 'Some very very long text content.'
    }
  }
}
</script>

# 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 相同。

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