<vue-clamp>

轻松实现多行文本截断。

GitHub →

# 功能

# Demo

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。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