基于 ElementUi 二次封装可复用的弹窗组件
子组件：
<template>
<div class="base-dialog">
<el-dialog
:title="title"
:visible.sync="visible"
:width="width"
:append-to-body="appendToBody"
>
<slot></slot>
<div slot="footer" v-if="isShowFooter">
<el-button @click="visible = false">{{cancel_name}}</el-button>
<el-button
type="primary"
@click="confirmBtn"
>{{confirm_name}}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'BaseDialog',
props:{
title: { // 标题
type: String,
default: '提示'
},
isShow: { // 弹窗是否展示
type: Boolean,
default: false
},
width:{ //弹窗宽度
type: String,
default: ''
},
cancel_name:{ //取消按钮名称
type: String,
default: '取 消'
},
confirm_name:{ //确定按钮名称
type: String,
default: '确 定'
},
isShowFooter:{ //是否自定底部
type: Boolean,
default: true
},
appendToBody: { // 是否将自身插入至 body 元素，有嵌套的弹窗时一定要设置
type: Boolean,
default: false
}
},
data() {
return {
};
},
computed: {
visible: {
get(){
return this.isShow
},
set(val){
this.$emit("update:isShow", false)
}
}
},
methods: {
confirmBtn(){ // 触发保存
this.$emit('handleSave')
},
},
created() {},
mounted() {},
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog{
.el-dialog__header{
box-shadow: 0px 0px 5px 0px rgba(136, 152, 157, 0.3);
border-radius: 6px 6px 0px 0px;
padding: 20px 20px 18px 25px;
.el-dialog__title{
color: #212121;
font-weight: 16px;
}
}
.el-dialog__body{
padding-left: 25px;
}
}
</style>
父组件：
<template>
<div class="dialog-test">
<el-button type="primary" @click="showDialog">弹窗</el-button>
<base-dialog
:isShow.sync="isShow"
title="测试"
width="703px"
@handleSave="handleSave"
>
<div>我是弹窗</div>
</base-dialog>
</div>
</template>
<script>
export default {
name: 'DialogTest',
components: {
BaseDialog: ()=> import('@/components/DialogChildren.vue'), // 引入弹窗
},
data(){
return{
isShow: false,
}
},
watch:{
isShow(newValue){ // 监听弹窗状态
if(newValue == false){
// 如果需要重置表单在此操作
this.reset()
}
}
},
methods:{
showDialog(){
this.isShow = true
},
handleSave(){//点击保存按钮
console.log('save');
},
reset(){
}
}
}
</script>
