vue查看更多/收起 按钮 以及按钮移动右下角 关键代码

页面时查看更多/收起  按钮

  <div
    ref="contentRef"
    :style="{
      width: '90.5%',
      height: 'auto',
      display: isExpanded ? 'block' : '-webkit-box',
      WebkitBoxOrient: 'vertical',
      WebkitLineClamp: isExpanded ? 'unset' : '2',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      lineHeight: '30px',
      fontSize: '16px',
      fontWeight: 'bold',
      justifyContent: 'center',
      alignItems: 'center',
      marginLeft: '5px',
    }"
    class="btndiv"
  >
             
    <button
      type="text"
      size="mini"
      @click="clickBtn"
      class="btn"
      v-if="showExpandBtn"
    >
           {{ isExpanded ? '收起' : '查看更多' }}          
    </button>
           {{ data.infoList.expertIntroduction }}        
  </div>

//style---------------------
  const isExpanded  = ref(false)
  const showExpandBtn = ref(false); // 控制按钮是否显示
  const contentRef = ref<HTMLElement | null>(null);

  const checkIfExceedsTwoLines = () => {
    nextTick(() => {
      const el = contentRef.value;
      if (el) {
        const lineHeight = 30; // px，和你的样式中一致
        const maxHeight = lineHeight * 2; // 2行
        showExpandBtn.value = el.scrollHeight > maxHeight;
      }
    });
  };

  const clickBtn = () => {
    isExpanded.value = !isExpanded.value;
  };
  onMounted(() => {
    checkIfExceedsTwoLines();
  })
//样式------------------------

.btn {
  float: right;
  height: 20px;
  clear: both;
  color: #409eff;
}

.btndiv::before {
  float: right;
  width: 0;
  height: calc(100% - 30px);
  content: '';
}

页面用这套基本没问题，但是弹窗就不可以了， 弹窗里 这个 100%无效  ，需要自己计算盒子高度 height: calc(100% - 30px);

弹窗 单个查看更多/收起  按钮

    <div
      :style="{
        '--current-height': `${currentHeight}px`,
        width: '95%',
        display: isExpanded ? 'block' : '-webkit-box',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: isExpanded ? 'unset' : '6',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        lineHeight: '30px',
        fontSize: '16px',
        fontWeight: 'bold',
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: '5px',
      }"
      class="btndiv"
      ref="btndivRef"
    >
      <ElButton type="text" @click="clickBtn" class="btn">
        {{ isExpanded ? '收起' : '查看更多' }}
      </ElButton>
      <a style="margin-right: 5px; font-size: 16px; font-weight: 550">标题:</a>
      <span style="font-size: 16px">{{ datas.expertIntroduction }}</span>
    </div>

    //script------------------

const isExpanded = ref(false);

const btndivRef: any = ref(null); // 绑定 DOM

const currentHeight: any = ref(0); // 存储当前高度

const datas: any = reactive({
  expertIntroduction:
    '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字',
});

// 计算高度的方法
const calculateHeight = () => {
  if (btndivRef.value) {
    currentHeight.value = btndivRef.value.clientHeight; // 或 offsetHeight
  }
};

const clickBtn = () => {
  isExpanded.value = !isExpanded.value;
  nextTick(() => {
    // 确保 DOM 更新后再计算高度
    calculateHeight();
  });
};

onMounted(() => {
  nextTick(() => {
    calculateHeight();
  });
});


//css代码----------------------
  .btn {
    float: right;
    clear: both;
    height: 20px;
    color: #409eff;
  }

  .btndiv::before {
    float: right;
    width: 0;
    height: calc(var(--current-height) - 25px);
    content: '';
    background-color: skyblue;
  }

弹窗 批量多个盒子查看更多/收起  按钮

html关键代码

  <div
        style="
          display: flex;
          gap: 10px;
          width: 100%;
          height: auto;
          padding: 10px;
        "
        v-for="(item, index) in contentList"
        :key="item"
      >
         <div
            ref="divRefs"
            :style="{
              '--current-height': `${item.height}px`,
              width: '95%',
              height: 'auto',
              display: item.expanded ? 'block' : '-webkit-box',
              WebkitBoxOrient: 'vertical',
              WebkitLineClamp: item.expanded ? 'unset' : '2',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              lineHeight: '25px',
            }"
            class="lastDIv"
          >
            <ElButton type="text" @click="toggleExpand(index)" class="lastbtn">
              {{ item.expanded ? '收起' : '查看更多' }}
            </ElButton>
            {{ item.content }}
          </div>
        </div>

script关键代码

//数据
const contentList: any = ref([
  {
    id: 1,
    content:
      '简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介',
    expanded: false,
    height: 0,
  },
  {
    id: 2,
    content:
      '简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介',
    expanded: false,
    height: 0,
  },
  {
    id: 3,
    content:
      '简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介.',
    expanded: false,
    height: 0,
  },
]);
const divRefs = ref<HTMLElement[]>([]);

//计算盒子高度方法
const toggleExpand = async (index: number) => {
  contentList.value[index].expanded = !contentList.value[index].expanded;
  await nextTick();
  if (divRefs.value[index]) {
    contentList.value[index].height = divRefs.value[index].clientHeight;
  }
};
onMounted(() => {
  nextTick(() => {
    // 初始化高度
    contentList.value.forEach((item: any, index: any) => {
      const el = divRefs.value[index];
      if (el) {
        item.height = el.clientHeight;
      }
    });
  });
});

css关键代码

  .lastbtn {
    float: right;
    clear: both;
    height: 20px;
  }
  .lastDIv::before {
    content: '';
    float: right;
    width: 0;
    height: calc(var(--current-height) - 23px);
  }