:轻松实现多行文本截断

时间:2021-1-8 作者:admin

轻松实现多行文本截断。

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-clampresize-detector 加入 vue.config.js 文件的 transpileDependencies 选项中:

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

```</details>  <details><summary>#### Vue CLI <small>v2</small></summary> 

如果使用的是 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 相同。

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。