实现如下
<template>
<h3>dialog3 test 全局</h3>
<el-button type="primary" size="default" @click="show">全局弹窗</el-button>
<div class="">
<!-- 弹窗 -->
<el-dialog v-model="visible" :show-close="false" append-to-body class="myDialogClass">
<!--弹窗标题-->
<template #header="{ close, titleId }">
<div class="myDialogHeader">
<span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px;">提示</span>
<el-button style="margin: 8px;" type="info" :icon="CircleCloseFilled" circle @click="close" size="small">
<el-icon style="font-size: 26px;" color="#ffffff"><CircleCloseFilled /></el-icon>
</el-button>
</div>
</template>
This is dialog content.
<!--弹窗底部-->
<template #footer>
<span class="myDialogFooter">
<el-button type="primary" @click="visible = false">确定</el-button>
<el-button type="primary" @click="visible = false">取消</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const visible = ref(false);
function show() {
//console.log('show',visible)
visible.value = true;
}
return { show, visible}
}
}
</script>
<style scoped>
.myDialogClass {
/*scoped 模式下 background-color 不生效 直接写到style*/
background-color: rgb(224,242,241) !important;
border-radius: 10px;
}
.myDialogClass .dlgTitleClass
{
color: rgb(26,147,144);
}
.el-dialog .el-dialog__header
{
margin: 0px !important;
padding: 0px !important;
padding-left: 0px !important;
}
.el-dialog .myDialogHeader {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 40px;
/* background-color: #ff00ff; */
border-bottom: 1px solid rgb(42,155,152);
margin: 0px 10px;
font-size: 18px;
font-weight: bolder;
}
.el-dialog .el-dialog__footer
{
padding: 10px;
}
.myDialogFooter .el-button
{
border-color: rgb(42,155,152);
background-color: rgb(242,249,249);
color: rgb(42,155,152);
}
</style>