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

一,实现效果

展开收起

二,代码部分

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;
      }