当前位置：首页 > news >正文

vue3 用el-dialog实现用户协议,内容是富文本, 滚动到最后才允许关闭

news 2025/9/24 9:26:16

<template><div><el-dialogv-model="dialogVisible"title="用户协议":close-on-click-modal="false":close-on-press-escape="false":show-close="false"width="50%"destroy-on-close><div class="ql-container ql-snow"><div ref="contentRef" class="notice-content ql-editor" v-html="protocolHtml" @scroll="handleScroll"></div></div><template #footer><div class="dialog-footer"><el-button size="default" @click="handleClose">关闭</el-button><el-button type="primary" @click="handleAgree" :disabled="!canClose"> 我已阅读并同意 </el-button></div></template></el-dialog></div>
</template><script setup>import { ref, nextTick, defineProps, defineEmits } from "vue";import { ElMessage, ElMessageBox } from "element-plus";const emits = defineEmits(["close"]);const props = defineProps({isShow: {type: Boolean,default: false}});const dialogVisible = ref(false);const protocolHtml = ref(`<h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1><h1>这是用户协议内容，您需要滚动到底部才能关闭本弹窗</h1>`);watch(() => props.isShow,(newVal, oldVal) => {dialogVisible.value = newVal;if (newVal) {canClose.value = false;nextTick(() => {const el = contentRef.value;if (el) {el.scrollTop = 0;el.addEventListener("scroll", handleScroll);}});}},{immediate: true,deep: true});const contentRef = ref(null);const canClose = ref(false);const handleScroll = () => {const el = contentRef.value;if (!el) return;const isBottom = Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < 10;canClose.value = isBottom;};const handleClose = () => {if (canClose.value) {emits("close", false);} else {ElMessage.warning("请先阅读完用户协议");}};// 同意协议const handleAgree = () => {if (canClose.value) {ElMessage.success("您已同意用户协议");emits("agreeClose", false);}};// 清理滚动事件onBeforeUnmount(() => {const el = contentRef.value;if (el) {el.removeEventListener("scroll", handleScroll);}});
</script><style scoped>.notice-content {height: 400px;overflow-y: auto;border: 1px solid #eee;padding: 15px;border-radius: 4px;background-color: #f9f9f9;font-size: 14px;line-height: 1.6;white-space: pre-wrap;word-break: break-all;}.dialog-footer {text-align: right;}::v-deep .ql-container.ql-snow {border: none;}
</style>