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>
相关推荐
独立开阀者_FwtCoder3 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者5 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder6 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder6 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806921 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说41 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉2 小时前
npm 包 scheduler 介绍
前端·npm·node.js