20.弹窗组件封装

弹窗组件封装

官网：组件 | Element

1. components下面新建SyDialog.vue组件

<template><el-dialog:title="props.title":model-value="props.visible":width="props.width +'px'":before-close="onClose"><!-- :close-on-click-modal="false" 点击弹框外面不关闭弹框 --><!-- 内容显示区 --><div class="container" :style="{ height: height + 'px' }"><!-- 内容显示区插槽 --><slot name="content"></slot></div><template #footer><span class="dialog-footer"><el-button type="danger" @click="onClose">取消</el-button><el-button type="primary" @click="onConfirm">确定</el-button></span></template></el-dialog>
</template><script setup lang="ts">
//弹框数据类型
interface DialogProps {title: string;visible: boolean;width: number;height: number;
}
//接收父组件传递的参数
const props = withDefaults(defineProps<DialogProps>(), {title: "新增",visible: false,width: 630,height: 280,
});
//注册事件
const emit = defineEmits(["onClose", "onConfirm"]);
//弹框关闭
const onClose = () => {emit("onClose");
};
//弹框确定
const onConfirm = () => {emit("onConfirm");
};
</script><style lang="scss" >
.container {overflow-x: initial;overflow-y: auto;
}
.el-dialog {border-top-left-radius: 7px !important;border-top-right-radius: 7px !important;.el-dialog__header {width: 101.1%;margin-top: -16px;margin-left: -16px;padding: 13px;border-top-left-radius: 7px !important;border-top-right-radius: 7px !important;background-color: #0a2542 !important;.el-dialog__title {color: #fff;font-size: 16px;font-weight: 600;}}.el-dialog__headerbtn {.el-dialog__close {color: #fff;}}.el-dialog__body {padding: 10px;}.el-dialog__footer {border-top: 1px solid #e8eaec !important;padding: 10px;}
}
</style>

2. 在dashboard中测试

<template><div>首页<el-button type="primary" size="default" @click="addBtn">新增</el-button><SyDialog:title="dialog.title":visible="dialog.visible"></SyDialog></div>
</template><script setup lang="ts">
import SyDialog from '@/components/SyDialog.vue';
import { reactive } from 'vue';//定义弹框属性
const dialog = reactive({title: '新增',visible: false,})//按钮点击事件
const addBtn = () => {dialog.visible = true;
}
</script><style scoped lang="scss"></style>

3.抽离弹框添加方式

1. 新建文件夹hooks在src下
   是重复使用的代码片段

2. 弹窗hooks封装

   import { reactive } from "vue";
   export default function useDialog() {//弹框属性const dialog = reactive({title: "新增",visible: false,width: 630,height: 280});//弹框关闭const onClose = () => {dialog.visible = false};//弹框确定const onConfirm = () => {dialog.visible = false};//弹框显示const onShow = () => {dialog.visible = true;}return {dialog,onClose,onConfirm,onShow}
   }
   

   <template><div>首页<el-button type="primary" size="default" @click="addBtn">新增</el-button><SyDialog:title="dialog.title":visible="dialog.visible"append-to-body:close-on-click-modal="false"@on-close="onClose"@on-confirm="onConfirm"><template v-slot:content>111</template></SyDialog></div>
   </template><script setup lang="ts">
   import SyDialog from '@/components/SyDialog.vue';
   // import { reactive } from 'vue';
   import useDialog from '@/hooks/useDialog';
   //获取弹框方法
   const { dialog,onClose,onConfirm,onShow } = useDialog()//定义弹框属性
   // const dialog = reactive({
   //     title: '新增',
   //     visible: false,// })//按钮点击事件
   const addBtn = () => {onShow()
   };</script><style scoped lang="scss"></style>
   

4. 效果图