网站建设开票应该开哪个行业,什么网站可以免费做视频的软件,app与网站开发的区别,百度 指数通过计算文章内容的高度来确定是否需要显示展开按钮#xff0c;然后根据用户的点击来展开或收起文章内容。以下是一个简单的实现示例#xff1a;
templatediv classarticlediv v-ifisContentOverflow :style{ maxHeight:…通过计算文章内容的高度来确定是否需要显示展开按钮然后根据用户的点击来展开或收起文章内容。以下是一个简单的实现示例
templatediv classarticlediv v-ifisContentOverflow :style{ maxHeight: contentMaxHeight px } refcontent classcontent{{ articleContent }}/divbutton v-ifisContentOverflow clicktoggleContent classtoggle-button{{ showFullContent ? 收起 : 展开 }}/button/div
/templatescript setup langts
import { ref, computed, onMounted } from vue;const articleContent refstring(文章内容这里是一段很长的文章内容。文章内容这里是一段很长的文章内容。文章内容这里是一段很长的文章内容。
);
const contentMaxHeight refnumber(100); // 设置最大高度
const showFullContent refboolean(false);const isContentOverflow computed(() {const contentEl document.getElementById(content);return contentEl ? contentEl.scrollHeight contentMaxHeight.value : false;
});const toggleContent () {showFullContent.value !showFullContent.value;
};onMounted(() {const contentEl document.getElementById(content);if (contentEl) {contentMaxHeight.value contentEl.clientHeight;}
});
/scriptstyle scoped
.article {position: relative;
}
.content {overflow: hidden;transition: max-height 0.3s ease;
}
.toggle-button {position: absolute;bottom: 0;right: 0;
}
/style首先通过计算属性isContentOverflow判断文章内容是否溢出如果溢出则显示展开按钮。然后根据用户点击来切换showFullContent的值以展开或收起文章内容。通过设置contentMaxHeight可以调整文章内容的最大高度。
