自定义Dialog弹窗
dialog组件
<template>
<div class="dialogView" v-if="dialogVisible">
<div class="dialogContent">
<div class="title">
<span>{{ title }}</span>
<el-icon @click="close" style="cursor: pointer"><CloseBold /></el-icon>
</div>
<div>内容</div>
<div class="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, Ref, toRefs } from "vue";
import { CloseBold } from "@element-plus/icons-vue";
export default defineComponent({
name: "pageEleven",
props: {
visible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "标题",
},
},
components: { CloseBold },
emits: ["closeFun"],
setup(props, { emit }) {
const dialogVisible: Ref = computed(() => {
return props.visible;
});
const state = reactive({});
function close() {
emit("closeFun", false);
}
function confirm() {
emit("closeFun", false);
}
return {
dialogVisible,
...toRefs(state),
close,
confirm,
};
},
});
</script>
<style lang='scss' scoped>
.dialogView {
position: absolute;
left: 0;
top: 0;
z-index: 101;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
.dialogContent {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 556px;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 10px;
padding: 10px;
.title {
height: 30px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.footer {
position: absolute;
bottom: 0;
right: 0;
height: 45px;
margin-right: 20px;
}
}
}
</style>
使用
<template>
<div class="pageEleven">
<el-button @click="visible = true">打开dialog</el-button>
<DialogComVue :title="title" :visible="visible" @closeFun="closeFun" />
</div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "pageEleven",
components: {
DialogComVue: defineAsyncComponent(() => import("@/components/dialogCom.vue")),
},
setup() {
const state = reactive({
title: "Dialog标题",
visible: false,
});
function closeFun(data: boolean) {
state.visible = data;
}
return {
...toRefs(state),
closeFun,
};
},
});
</script>