更新记录

1.0（2021-03-02） 下载此版本

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

平台兼容性

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

特性

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

组件属性

使用示例(含调试场景)

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