更新记录

1.0(2021-03-02)

  • 发布overflow-ellipsis 文本多行溢出省略折叠组件 1.0

平台兼容性

overflow-ellipsis 文本多行溢出省略折叠组件

特性

  • [x] 兼容 H5、APP、小程序
  • [x] 支持指定行数触发溢出省略折叠
  • [x] 接受文本内容长度动态改变
  • [x] 可配置折叠展示按钮的显示
  • [ ] 自定义折叠展示操作区域插槽

组件属性

属性名 类型 必填 默认值 说明
content String 文本内容
line Number 1 文本超出 line 行触发溢出省略折叠
showButton Boolean true 是否显示折叠展示按钮

使用示例(含调试场景)

<template>
  <view class="app">
    <view class="test-box test-font">
      <ellipsis-text :content="content" :line="5" :showButton="true"></ellipsis-text>
    </view>
    <button class="toggleContentBtn" @click="toggleContent">toggleContent</button>
  </view>
</template>

<script>
  import EllipsisText from '@/components/overflow-ellipsis/overflow-ellipsis.vue';
  const shortContent = 'DCloud公司拥有600万开发者用户';
  const longContent =
    `DCloud公司拥有600万开发者用户,几十万应用案例、12亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。`;
  export default {
    name: 'App',
    components: {
      EllipsisText,
    },
    data() {
      return {
        content: '',
      };
    },
    created() {
      setTimeout(() => {
        this.content = longContent;
      }, 500);
    },
    methods: {
      toggleContent() {
        this.content = this.content === shortContent ? longContent : shortContent;
      }
    }
  };
</script>
<style scoped>
  /* mock */
  .app{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .test-box {
    width: 35em;
    max-width: 90%;
    border: 1px solid red;
  }

  .test-font {
    color: coral;
    line-height: 1.2;
    font-size: 18px;
  }
  .toggleContentBtn{
    position: fixed;
    bottom: 50rpx;
    left: 0;
    right: 0;
  }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问