uni-app Vue3文字超出规定行数时显示展开和收起功能

一、上图先

---

二.介绍

在做uni-app项目的过程中需要实现文字超出规定行数显示展开和收起功能，并且字体大小还可以改变，上个厕所回来之后有了解决办法~~~

• 已封装为组件
• 可以控制多少行实现展开收起功能
• 能够根据字体大小实现功能，单位在组件里规定为了rpx，
• 目前2行能够完美展示 其他行数不能完美展示需细微调组件里calss为text和seat的高度参数

---

三、废话不多说直接上代码

Text-Hidden组件代码

<template>
    <view class="text-view" :style="{ fontSize: fontSize + 'rpx' }">
        <view class="text"  :style="{ maxHeight: textStyle.maxHeightStyle }">
        <view class="seat" :style="{height:textStyle.seatHeight}"></view>
            <view class="is-show" v-show="isShow && !showall" @click.stop="showClick(showall)">...展开>></view>
            {{ content }}
            <view class="is-hidden" v-show="isShow && showall" @click.stop="showClick(showall)">收起>></view>
        </view>
        <view class="hidden-info">{{ content }}</view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted,getCurrentInstance } from 'vue';
const showall = ref(false);   //用来判断是否超出规定行数
const isShow = ref(false);
const instance = getCurrentInstance();
type Props = {
    isHidden: boolean,  //控制展开和收起
    content: string,    //内容
    lineClamp: number,   //多少行显示展开按钮
    fontSize: number     //字号大小
}
const prop = withDefaults(defineProps<Props>(), {
    isHidden: true,
    content: "",
    lineClamp: 2,
    fontSize: 24     //单位：rpx
})

const getMaxHeight = onMounted(() => {
    if(!prop.isHidden){
        return
    }
    let textHeight: number | undefined = 0;
    // 获取所有文本在html中的高度
    let query = uni.createSelectorQuery().in(instance);
    query
        .select(".hidden-info")
        .boundingClientRect((data) => {
            textHeight = Number(data.height);
        })
        .exec();
    //行数 = 文本高度 / 行高；
    textHeight = textHeight;
    let lineNum = textHeight / rpxToPx(prop.fontSize);
    isShow.value = lineNum > prop.lineClamp + 1.2 ? true : false;
    
})

const rpxToPx = (rpx: number) => {
    let deviceWidth = uni.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
    let px = (deviceWidth / 750) * Number(rpx);
    return Math.floor(px);
}


const textStyle = computed<any>(() => {
    let height = 1.43 * prop.lineClamp
    let style = `${showall.value||!prop.isHidden ? 'none' : height+ 'em'}`
    let seatHeight = `${showall.value||!prop.isHidden ? 'none' : (height-1.29)+ 'em'}`
    let styleObj={
        maxHeightStyle:style,
        seatHeight
    }
    return styleObj

})

const showClick = (isShowall: boolean) => {
    showall.value = !isShowall;
}
</script>

<style lang="scss" scoped>
.text-view {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
    white-space: unset !important;

    .text {
        position: relative;
        overflow: hidden;
        text-align: justify;
        text-overflow: ellipsis;
        word-break: break-all;
        // transition: 0.3s max-height;
    }

    .hidden-info {
        width: 100%;
        position: absolute;
        opacity: 0;
    }

    .is-hidden {
        position: relative;
        float: right;
        color: #34abec;
        z-index: 99;
    }

    .is-show {
        float: right;
        background: #ffffff;
        color: #34abec;
        position: relative;
        z-index: 99;
        clear: both;
    }
    .seat{
        float: right;
    }
}
</style>

使用示例代码

<template>
  <view class="content">
    
    <view class="main">
      <TextHiddenVue :isHidden="true" :content="item.content" :line-clamp="2" :fontSize="28" v-for="(item,index) in arr" :key="index"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TextHiddenVue from "../../components/Text-Hidden.vue";
uni.setNavigationBarTitle({
  title: "文字展开收起",
});
const content = ref("Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。");
const arr = [{content:content.value}]
</script>

<style>
.main{
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}
</style>

---

四、结尾

如效果不满意看组件代码调吧，我写的应该不算乱吧，哈哈