优雅的使用element-plus的dialog-[从零开始vue3+vite+ts+pinia+router4后台管理(9)
系列文章
从零开始vue3+vite+ts+pinia+router4后台管理(1)
从零开始vue3+vite+ts+pinia+router4后台管理(2)-页面布局
从零开始vue3+vite+ts+pinia+router4后台管理(3)-动态路由
从零开始vue3+vite+ts+pinia+router4后台管理(4)-导航标签栏和keep-alive缓存
从零开始vue3+vite+ts+pinia+router4后台管理(5)-二次封装表格1.0
从零开始vue3+vite+ts+pinia+router4后台管理(6)-全局自定义指令实现节流与防抖
什么才是完美的表格二次封装elementPlus表格?-从零开始vue3+vite+ts+pinia+router4后台管理(7)
elementPlus-Form封装动态表单-从零开始vue3+vite+ts+pinia+router4后台管理(8)
bash
# 克隆项目 gitee地址
git clone https://gitee.com/3439/Spurs-Admin.git
# 进入项目目录
cd Spurs-Admin
# 安装依赖
npm install
# 本地开发 启动项目
npm run dev
1.解决使用dialog的什么问题?
1.解决引入
Dialog
去定义一个visible
变量2.减少一些重复的dom,比如每个dialog都带有的确定和取消
3.统一去配置elementPlus的Dialog的api
2.基于 el-dialog 进行初步封装
html
<template>
<div class="spurs-dialog">
<el-dialog
v-bind="$attrs"
v-model="dialogVisible"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
draggable
>
<slot name="body"></slot>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible=false">取消</el-button>
<el-button v-if="dialogType!='readonlyDialog'" type="primary" @click="saveSubmit">
确 定
</el-button>
</span>
</template>
<slot name="footer"></slot>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
let dialogVisible = ref(false)
defineExpose({
dialogVisible
})
const props = defineProps({
dialogType: {type:String, default:""}//默认有确定和取消readonlyDialog展示dialog只有取消
});
const close = () =>{
dialogVisible.value = false
}
const emit = defineEmits(['saveSubmit'])
const saveSubmit = () => {
emit('saveSubmit');
}
</script>
1.首先用
v-bind="$attrs"
去接收elementPlus 所有父组件使用的 api等2.用defineExpose把控制显示隐藏的dialogVisible暴露出去,让父组件去控制
3.定义dialog的类型 默认都有 确定和取消按钮 但是有的dialog只有展示功能 定义readonlyDialog的时候只有取消按钮,然后定义一个footer的插槽来定义特殊的情况
4.通过defineEmits 定义确定按钮saveSubmit事件,让父组件去接收
使用
html
<template>
<div class="simple-dialog">
<el-button @click="spursDialogRef.dialogVisible = true">打开dialog</el-button>
<spurs-dialog
ref="spursDialogRef"
:title="title"
@saveSubmit="saveSubmit"
>
<template #body>
<span>我是dialog111</span>
</template>
<template #footer>
<el-button type="success" @click="spursDialogRef.dialogVisible = true">我是操作2</el-button>
</template>
</spurs-dialog>
</div>
</template>
<script setup lang="ts">
import SpursDialog from '@/components/SpursDialog/index.vue'
import {ref} from "vue";
let title = ref('提示')
const spursDialogRef = ref <any> ()
const saveSubmit = () => {
console.log("点击了确定按钮")
}
</script>
3.一个页面多个dialog的情况
定义不同的ref
html
<template>
<div class="simple-dialog">
<el-button @click="spursDialogRef.dialogVisible = true">打开dialog</el-button>
<el-button @click="spursDialogRef2.dialogVisible = true">打开dialog2</el-button>
<spurs-dialog
ref="spursDialogRef"
:title="title"
@saveSubmit="saveSubmit"
>
<template #body>
<span>我是dialog111</span>
</template>
<template #footer>
<el-button type="success" @click="spursDialogRef.dialogVisible = true">我是操作2</el-button>
</template>
</spurs-dialog>
<spurs-dialog
ref="spursDialogRef2"
:title="title"
:dialogType="dialogType"
>
<template #body>
<span>我是dialog2222</span>
</template>
</spurs-dialog>
</div>
</template>
<script setup lang="ts">
import SpursDialog from '@/components/SpursDialog/index.vue'
import {ref} from "vue";
let dialogType = ref('readonlyDialog')
let title = ref('提示')
const spursDialogRef = ref <any> ()
const spursDialogRef2 = ref <any> ()
const saveSubmit = () => {
console.log("点击了确定按钮")
}
</script>
4 嵌套的对话框
html
<template>
<div class="simple-dialog">
<el-button @click="spursDialogRef.dialogVisible = true">打开dialog</el-button>
<spurs-dialog
ref="spursDialogRef"
:title="title"
width="900"
@saveSubmit="saveSubmit"
>
<template #body>
<span>我是dialog111</span>
<br>
<el-button @click="spursDialogRef2.dialogVisible = true">打开内层 Dialog</el-button>
<spurs-dialog
ref="spursDialogRef2"
:title="title"
@saveSubmit="saveSubmitInner"
>
<template #body>
<span>我是内层 Dialog222222222</span>
</template>
</spurs-dialog>
</template>
<template #footer>
<el-button type="success" @click="spursDialogRef.dialogVisible = true">我是操作2</el-button>
</template>
</spurs-dialog>
</div>
</template>
<script setup lang="ts">
import SpursDialog from '@/components/SpursDialog/index.vue'
import {ref} from "vue";
let dialogType = ref('readonlyDialog')
let title = ref('提示')
const spursDialogRef = ref <any> ()
const spursDialogRef2 = ref <any> ()
const saveSubmit = () => {
console.log("点击了确定按钮")
}
const saveSubmitInner = () => {
console.log("点击了内层确定按钮")
}
</script>
5.全局使用dialog
最后在main.ts文件进行注册即可使用
typescript
import SpursDialog from '@/components/SpursDialog/index.vue'//引入dialog组件
app.component('SpursDialog', SpursDialog)//注册dialog