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

合集 - 必(54)

1.uniapp+vue3配置环境变量2023-11-302.uniapp关于uni.getUserProfile的使用2023-11-303.uniapp有意思的api之openSetting2023-12-024.处理flex布局2023-12-025.uniapp登录板块封装(旧接口getUserInfo)2023-12-036.uniapp获取用户信息2023-12-047.在项目中使用UEditor碰到的几个问题2023-12-048.一维数组转二位数组2023-12-109.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1110.win系统执行脚本报错策略更改无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1211.uniapp去除button的边框2024-01-1012.uniapp中OnShow获取缓存2024-01-1013.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-1114.js图片懒加载，在不做分页的情况下的解决方案2024-01-1215.width:100%与width:auto区别2024-01-1516.vue中render函数和h函数2024-01-1517.leetcode1047字符串反复去重（栈）2024-01-1518.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>2024-01-2119.记录一次uniapp使用scrollview2024-01-2220.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-2221.js不同类型比较2024-01-3122.登录后继续浏览之前的页面2024-02-0123.css2024-02-0224.sse2024-02-1825.数组扁平化2024-02-1926.DOMRect对象2024-02-2027.前端三大系列图解释2024-02-2028.js中关于return和if条件处理2024-02-2029.js文字处理两端展示中间省略号2024-02-2030.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-2031.说一下flex的属性2024-02-2632.vue3中404路由匹配规则2024-02-2633.shape-outside2024-02-2734.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-2835.uniapp清除指定key缓存2024-03-0736.vue3+uniapp关于button的open-type无法生效2024-03-1137.uniapp+vue3 使用list触底+下拉2024-03-1138.diff算法vue2024-03-1239.动态修改manifest.json2024-03-1840.记录一下大小写导致的问题2024-03-2041.小程序真机报错errMsg: “hideLoading:fail:toast can‘t be found“ ？2024-03-2542.vscode开发uniapp配置12024-03-2543.渐变颜色css设置2024-03-2944.微信小程序关于小说类使用官方阅读器2024-03-2945.一个简单的伪类选择器2024-03-2946.iframe 高度设置为0时还有占位_iframe占位2024-03-2947.git push所有分支到远程仓库2024-04-0348.输入框连续请求中取消上次请请求2024-04-1249.VS Code侧边栏的“资源管理器”丢了2024-04-1250.css样式相关的惊艳的属性2024-04-1251.千分位分隔函数2024-04-18

52.uniapp实现多行文本溢出超过指定行数 展开 收起2024-05-16

53.前端如何接收流式数据2024-07-2254.perspective和transform系列属性2024-08-27

收起

点击查看代码

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



     <multiline-expansion content="uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起uniapp实现多行文本溢出超过指定行数 展开 收起"></multiline-expansion>