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>
相关推荐
CAD老兵1 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im2 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man2 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下17 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵43 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er1 小时前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮1 小时前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士2 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端