废话不说了,直接上干货!(亲测好用)
**
基于elemenet el-dialog封装 vue 封装弹窗组件## 标题
1,封装Dialog.vue文件
**
<template>
<div class="base-dialog">
<el-dialog :type="type"
:width="width"
:custom-class="customClass"
:fullscreen="fullscreen"
:title="title"
:close-on-click-modal="closeOnClickModal"
:append-to-body="appendToBody"
:visible.sync="visible"
:before-close="beforeClose"
@closed="closed">
<slot name="body" />
<div v-if="footer"
slot="footer"
class="dialog-footer">
<slot name="footer" />
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "BaseDialog",
props: {
appendToBody: { type: Boolean, default: false }, // 是否嵌套
closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
footer: { type: Boolean, default: true }, // 是否显示底部
title: String, // 对话框title
type: String, // 对话框类型:1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
width: String, // 对话框宽度800px 或 50%
beforeClose: Function// 关闭回调函数
},
data() {
return {
visible: false,
fullscreen: false
};
},
computed: {
customClass() {
let className = ''
switch (this.type) {
case 'form':
className = 'base-dialog-form'
break
case 'table':
className = 'base-dialog-table'
break
case 'fullscreen':
className = 'base-dialog-fullscreen'
break
}
return className
}
},
created() {
this.type === 'fullscreen' && (this.fullscreen = true)
},
methods: {
open() {
this.visible = true
},
close() {
this.visible = false
},
closed() {
this.$emit('closed')
}
}
}
</script>
<style lang="scss">
.base-dialog {
text-align: left;
.el-dialog__wrapper {
overflow: hidden;
.el-dialog {
display: flex;
flex-direction: column;
.el-dialog__header {
height: 40px;
line-height: 40px;
padding: 0px 20px;
background: #eff3fa;
color: #fff;
border-bottom: 1px solid #dcdfe6;
border-top-left-radius: 0;
border-top-right-radius: 0;
.el-dialog__title {
font-size: 16px;
// font-weight: bold;
}
.el-dialog__headerbtn {
top: 12px;
}
}
.el-dialog__body {
flex: 1;
overflow: auto;
padding: 20px;
}
.el-dialog__footer {
text-align: center;
border-top: 1px solid #eee;
padding: 8px 20px;
background: #fefefe;
}
}
.base-dialog-form {
height: auto;
margin-top: 15vh !important;
.el-dialog__body {
padding: 20px 20px 0 20px;
}
.el-dialog__footer {
border: none;
padding: 10px 20px 20px;
background: none;
}
.custom-table {
// 取消表格下边线
tbody tr:last-child td {
border-bottom: none !important;
}
}
}
.base-dialog-table {
height: 90vh;
margin-top: 5vh !important;
.el-dialog__body {
}
}
.base-dialog-fullscreen {
height: 100vh;
width: 100vw;
.el-dialog__body {
padding: 10px;
}
}
}
}
</style>
**
2.下边是如何调用,懒人版本,直接用就行,注意看内部注释哦
!**
//组件调用
<dialog-a ref="dialogaaa" />
//组件引用
import DialogA from './Dialog.vue'
//注册组件
components: {
DialogA
},
//打开Dialog
this.$refs.dialogaaa.open()
//组件内部定义逻辑,注意dialog隐藏显示是show不是if,所以初次加载逻辑不能写在created里边
<!-- Dialog-->
<template>
<base-dialog ref="dialog"
width="800px"
type="form"
:fullscreen="true"
:title="title"
footer
:before-close="close"
@closed="closed">
<template slot="body">
<div>tree</div>
</template>
<template slot="footer">
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="close()">取消</el-button>
</template>
</base-dialog>
</template>
<script>
import BaseDialog from '@/components/BaseDialog.vue'
export default {
components: {
BaseDialog
},
data() {
return {
title: ''
}
},
computed: {
},
created() {},
methods: {
open() {
this.$refs.dialog.open()
this.title = '新增XXXXXX'
},
close() {
this.$refs.dialog.close()
},
closed() {},
save() {}
}
}
</script>
<style lang='scss' scoped>
</style>
咋样,跟着我,教你成为一名合格得CV大师!记得点赞关注!当然了,这也是我日常开发的积累,作为我得组件库,方便我自用,以后也会不断的迭代一些组件以及好用的东西!