vue封装一个多行文本展开收起的组件

最新推荐文章于 2024-05-14 10:34:03 发布

weixin_54233971

最新推荐文章于 2024-05-14 10:34:03 发布

阅读量478

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54233971/article/details/130493579

版权

该代码示例展示了一个Vue组件，用于处理文本的展开和收起效果。利用CSS的`-webkit-line-clamp`属性限制显示的行数，通过Vue的响应式数据`isAll`和`showCtro`控制按钮状态及文本显示。点击按钮时，切换文本的显示高度和‘展开/收起’文字。

摘要由CSDN通过智能技术生成

<template>
  <div class="content">
    <div class="text" :class="[isAll ? props.longClass : '']">
      <label for="exp" class="btn" v-if="showCtro" @click.stop="isAll = !isAll">
        <span class="words">{{ isAll ? '展开' : '收起' }}</span>
      </label>
      <span ref="reportText" v-html="textHtml" />
    </div>
  </div>
</template>

<script setup>
  import { defineComponent, ref, watch, onMounted, nextTick } from 'vue'
  const props = defineProps({
    text: {
      type: String,
      default: ''
    },
    textHtml: {
      type: String,
      default: ''
    },
    longClass: {
      type: String,
      default: 'long'
    }
  })
  const showCtro = ref(false)
  const isAll = ref(false)
  const reportText = ref('')
  const classObj = ref({
    long: 75
  })

  watch(
    () => props.text,
    async () => {
      isAll.value = false
      showCtro.value = false
      await nextTick()
      const key = props.longClass
      if (props.text) {
        showCtro.value = isAll.value = reportText.value?.offsetHeight > classObj.value[key]
      }
    },
    {
      immediate: true
    }
  )
</script>

<style lang="less" scoped>
  .content {
    height: 100%;
    display: flex;
  }

  .text {
    width: 100%;
    color: #333;
    font-size: 14px;
  }

  .long {
    height: 64px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .btn {
    float: right;
    clear: both;
    margin-right: 8px;
    color: #514def;
    cursor: pointer;
  }
  .text::before {
    content: '';
    float: right;
    width: 0;
    height: calc(100% - 20px);
  }
  .exp:checked + .text {
    -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
  }
</style>

实现思路：

1、利用css样式让展开收起按钮浮动后，与文本处在同一个空间内

2、通过动态样式，来切换展开和收起的不同文本样式和高度