Vue中使用element-plus中的el-dialog定义弹窗-内部样式修改-v-model实现-demo

效果图

 实现代码

<template><el-dialog class="no-code-dialog" v-model="isShow" title="没有收到验证码？"><div class="nocode-body"><div class="tips">请尝试一下操作</div><div class="wrap"><div class="row"><i></i><span>请确认邮箱地址是否输入正确。</span></div><div class="row"><i></i><span>邮件发送可能存在延迟，请稍等片刻。</span></div><div class="row"><i></i><span>请确认邮件是否在垃圾箱中。</span></div><div class="row"><i></i><span>若问题仍未解决，请联系客服寻求帮助 。</span></div></div></div><template #footer><div class="dialog-btn" @click="isShow = false">确定</div></template></el-dialog>
</template><script setup>
import { ref, computed, defineProps, defineEmits } from 'vue';
const props = defineProps({modelValue: {type: Boolean,default: false}
});
const emits = defineEmits(['update:modelValue']);
const isShow = computed({set(val) {emits('update:modelValue', val);},get() {return props.modelValue;}
});
</script>

样式修改

<style lang="less" scoped>
.no-code-dialog {.nocode-body {.tips {color: #6c6c6c;font-family: PingFang SC;font-size: 14px;font-weight: 600;padding: 30px 0 15px;}.wrap {.row {display: flex;align-items: center;margin-bottom: 10px;i {display: inline-block;width: 7px;height: 7px;transform: rotate(45deg);background-color: #000;}span {color: #000;font-family: PingFang SC;font-size: 14px;margin-left: 10px;}}}}.dialog-btn {display: flex;justify-content: center;align-items: center;width: 372px;height: 40px;border-radius: 4px;background: #000;color: #fff;font-family: PingFang SC;font-size: 14px;font-weight: 500;}
}
// :deep(.el-dialog) {
//   background: #fff;
// }
// :deep(.el-dialog__body) {
//   height: 350px;
//   padding-bottom: 0px;
// }
</style>
<style lang="less">
.el-overlay {.el-overlay-dialog {.el-dialog.no-code-dialog {--el-dialog-width: 420px;--el-dialog-bg-color: #fff;.el-dialog__header .el-dialog__title {color: #000;}}}
}
</style>

.el-dialog.no-code-dialog 添加自己定义的类名用于区分其他组件

---

效果图

实现代码-封装

<template><el-dialogdestroy-on-close:show-close="false":append-to-body="true"v-model="isShow"class="success-dialog"style="width: 420px; height: 232px"><div class="success-dialog-container"><img class="fail" src="@/assets/images/register/success.svg" /><div class="title">{{ props.errType.title }}</div><div class="cont">{{ props.errType.cont }}</div><div class="footer"><div class="but" @click="closeDialog">确定</div></div></div></el-dialog>
</template><script setup>
import { defineProps, defineEmits, ref, reactive, computed } from 'vue';const props = defineProps({modelValue: {type: Boolean,default: false},errType: {type: Object,default: {title: '恭喜您！注册成功！',cont: '欢迎加入abcd！'}}
});const emits = defineEmits(['update:modelValue', 'onChangeDialog']);
const isShow = computed({get() {return props.modelValue;},set(val) {emits('update:modelValue', val);}
});const closeDialog = (val) => {console.log('onChangeDialog');emits('onChangeDialog', true);
};
</script>
<style lang="less">
.success-dialog {&.el-dialog {--el-dialog-bg-color: transparent !important;.el-dialog__header,.el-dialog__body {padding: 0;}}
}
</style>
<style lang="less" scoped>
.success-dialog {position: relative;.success-dialog-container {position: absolute;width: 100%;height: 246px;background: #ffffff;border-radius: 8px;bottom: 0;padding: 70px 24px 24px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;.title {color: #000;text-align: center;font-size: 18px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;}.cont {display: flex;flex-direction: column;color: #868e9b;text-align: center;font-size: 14px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;padding: 0 14px;}.footer {.but {width: 372px;height: 40px;color: #fff;font-size: 14px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;background: #000;border-radius: 5px;display: flex;justify-content: center;align-items: center;cursor: pointer;}}.fail {width: 64.632px;height: 66.607px;position: absolute;top: -20px;left: calc((100% / 2) - (64.632px / 2));}}
}
</style>

 使用

<template><NoCodeDialog v-model="isShowNoCodeDialog" /><SuccessDialog v-model="isSuccessDialog" />
</template><script setup>
import { ref } from 'vue';
import NoCodeDialog from '@/views/Register/components/NoCodeDialog.vue';
import SuccessDialog from '@/views/Register/components/SuccessDialog.vue';
const isShowNoCodeDialog = ref(true);
const isSuccessDialog = ref(true);
</script>