vue 超出两行显示查看更多按钮

JS 部分为 Vue3 版本写法

<!--描述-->
<div class="brand-info-desc">
    <input id="btn-input" class="btn-input" v-model="checkbox" type="checkbox">
    <div class="text">
        <label class="btn" v-if="showMoreBtn" for="btn-input" :data-suffix="btnText"></label>
        <pre ref="brandDesc">{{ brandInfo.description }}</pre>
    </div>
</div>

.brand-info-desc {
    display: flex;
    width: 100%;
    overflow: hidden;
    @include font-size(16px, 28px);
    color: #DBDBDB;
    margin-top: 14px;

    .text {
        width: 640px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        position: relative;
        word-wrap: break-word;

        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        &::before {
            content: '';
            height: calc(100% - 24px);
            float: right;
        }

        &::after {
            content: '';
            width: 999vw;
            height: 999vw;
            position: absolute;
            box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #1E1D2B;
            margin-left: -100px;
        }

        .btn {
            float: right;
            clear: both;
            font-weight: 600;
            margin-left: 10px;
            line-height: 22px;
            cursor: pointer;
            position: relative;

            &:hover {
                text-decoration: underline;
            }

            &::before {
                content: attr(data-suffix);
            }
        }
    }

    .btn-input {
        display: none;
    }

    .btn-input:checked + .text {
        -webkit-line-clamp: 999;
    }

    .btn-input:checked + .text::after {
        visibility: hidden;
    }

    .btn-input:checked + .text .btn::before {
        content: attr(data-suffix);
    }
}

// 判断描述是否超过两行. 这个放到接口返回中
nextTick(() => {
    if (brandDesc.value.scrollHeight > brandDesc.value.clientHeight) {
        // 文本超出了
        state.showMoreBtn = true
        state.btnText = t('button.seeMore')
    } else {
        state.showMoreBtn = false
    }
})
// 描述按钮文案
watch(
  () => state.checkbox,
  (val, prevVal) => {
    if (val) {
      state.btnText = t('button.seeLess')
    } else {
      state.btnText = t('button.seeMore')
    }
  }
)