uniapp实现多行文本溢出超过指定行数 展开 收起

一、组件封装

javascript 复制代码
<template>
  <view class="multiline">
    <view class="info">
      <view :class="{hide:!iSinfo}" :style="!iSinfo?computedStyle:''">
        <view :style="{ color: textColor,fontWeight:fontWeight,fontSize:fontSize + 'rpx'}">
          {{content}}
        </view>
      </view>
      <text @tap="showinfo" v-if="!iSinfo"
        :style="{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}">展开</text>
    </view>
    <text @tap="showinfo" v-if="iSinfo" class="hidebtn"
      :style="{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}">收起</text>
  </view>
</template>

<script>
  export default {
    props: {
      // 文本信息
      content: {
        type: String,
        default: ""
      },
      // 默认显示几行文本
      linesCount: {
        type: [Number, String],
        default: 2
      },
      // 文字颜色
      textColor: {
        type: String,
        default: "#333333"
      },
      // 文字粗体大小
      fontWeight: {
        type: [Number, String],
        default: 400
      },
      // 文字大小
      fontSize: {
        type: [Number, String],
        default: 24
      },
      // 展开收起文字大小
      showinfoSize: {
        type: [Number, String],
        default: 24
      },
      // 展开收起文字颜色
      showinfotextColor: {
        type: String,
        default: "#333333"
      },
      // 展开收起文字粗体大小
      showinfoFontWeight: {
        type: [Number, String],
        default: 400
      },
    },
    data() {
      return {
        iSinfo: false,
      };
    },
    mounted() {},
    computed: {
      computedStyle() {
        const style = `-webkit-line-clamp: ${this.linesCount};`;
        return style;
      }
    },
    methods: {
      showinfo() {
        this.iSinfo = !this.iSinfo
      }
    },
  };
</script>

<style lang="scss" scoped>

  .multiline{
    display: flex;
    // width: 100%;
    flex-direction: column;
    background-color: #fff;
    position: relative;

    .info {
      display: flex;
      flex-direction: column;

      view {
        text-align: justify;
        word-break: break-word; //换行模式
        background-color: #fff;
      }

      text {
        width: 70px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
        color: #0078FF;
        position: absolute;
        bottom: 0rpx;
        right: 0rpx;
      }
    }

  }

  .hidebtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }

  .hide {
    word-break: break-word; //换行模式
    overflow: hidden;
    text-overflow: ellipsis; //修剪文字
    display: -webkit-box;
    // -webkit-line-clamp: 2; //此处为上限行数
    -webkit-box-orient: vertical;
  }
</style>

二、使用

javascript 复制代码
     <multiline-expansion content="uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起"></multiline-expansion>
相关推荐
键盘不能没有CV键37 分钟前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ1 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python2 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep3 小时前
【前端】前端运行环境的结构
前端
你的人类朋友3 小时前
【Node】认识multer库
前端·javascript·后端
Aitter3 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front3 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'4 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'4 小时前
css `dorp-shadow`
前端·css
流***陌4 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序