PC端文字过多展开收起跟在...后面（可自定义行数）

NSD_wei

于 2024-08-09 09:24:43 发布

阅读量146

点赞数 7

文章标签： javascript vue.js css html5

本文链接：https://blog.csdn.net/NSD_wei/article/details/141052667

版权

话不多说直接上代码，可直接复制根据需求修改
TextMore.vue

<template>

  <div>

    <div class="yuanqu-con" :style="{ '--beforeHeight': beforeHeight }">

      <div :style="{ '-webkit-line-clamp': row }" class="text" v-if="isAll == 0" ref="myDiv">

        <span class="btn" @click="lookmore" v-if="isMore == 1">查看更多</span>

        <div class="text-con" ref="textMore">

          {{ desc }}

        </div>

      </div>

      <div v-if="isAll == 1">{{ desc }} <span class="Packup" @click="isAll = 0">收起</span></div>

    </div>

    <div class="play" style="opacity: 0; height: 0px; line-height: 24px; overflow-y: auto">

      <div ref="nonetext">{{ desc }}</div>

    </div>

  </div>

</template>



<script setup>

import { onMounted, ref, defineProps, nextTick } from 'vue';

const props = defineProps({

  desc: {

    type: String,

    default: '',

  },

  row: {

    type: Number,

    default: 3,

  },

});

const beforeHeight = ref('48px');

const nonetext = ref(null);

const textMore = ref(null);

const myDiv = ref(null);

const isMore = ref(0);

const isAll = ref(0);

const lookmore = () => {

  isAll.value = 1;

};

onMounted(() => {

  // nextTick(() => {

  MoreRsize();

  // });

});

const MoreRsize = () => {

  nextTick(() => {

    if (nonetext.value.clientHeight > props.row * 24) {

      isMore.value = 1;

    } else {

      isMore.value = 0;

    }

    beforeHeight.value = (props.row - 1) * 24 + 'px';

  });

};

// window.onresize = () => {

//   MoreRsize();

// };

</script>



<style lang="less" scoped>

.yuanqu-con {

  width: 100%;

  font-size: 14px;

  color: #666666;

  line-height: 24px;



  .text {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }



  .text::before {

    content: '';

    float: right;

    height: var(--beforeHeight);

    /*先随便设置一个高度*/

    background: #fff;

  }



  /* .text::after {

            content: '';

            width: 100%;

            height: 65px;

            position: absolute;

            background: #fff;

            } */

  .btn {

    margin-left: 3px;

    padding: 0 3px;

    float: right;

    clear: both;

    cursor: pointer;

    color: #4876ff;

  }

}

.Packup {

  color: #4876ff;

  cursor: pointer;

}

.play {

  font-size: 14px;

  color: #666666;

  // 去除滚动条

  // overflow: hidden;

  // 隐藏滚动条

  scrollbar-width: none;

}

</style>

使用

 <TextMore
                desc="这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开"
                :row="3"
              ></TextMore>

效果