vue3+antd超过一行+省略号+收起展开显示

原创于 2023-04-10 16:47:40 发布 · 794 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

该文章介绍了如何使用HTML、CSS和JavaScript实现文本的折叠与展开效果。通过监听元素的高度变化，控制显示或隐藏详细内容，同时提供了展开和收起的交互按钮，按钮状态根据内容是否展开动态调整。

一,实现效果

展开收起

二,代码部分

1，html代码

     <div
              :class="isShowZK && isZk ? 'text' : ''"
              :ref="isShowZk"
              id="textContainer"
            >
              {{ dataAllList.summary }}
            </div>
            <div v-if="isShowZK" @click="isZk = !isZk" class="default">
              <span v-show="isZk"> 展开<DownOutlined /></span>
              <span v-show="!isZk">收起 <UpOutlined /></span>
            </div>

2，js部分

 const state = reactive({
      isShowZK: true,
    });
    const isShowZk = (el) => {
      //展开和关闭按钮的显示和隐藏
      let h = el?.clientHeight;
      state.isShowZK = h > 20 ? true : false;
    };

3，css代码

  .text {
        display: -webkit-box;
        overflow: hidden;
        margin-bottom: 4px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
 .default {
        color: @primary-color;
        cursor: pointer;
      }