基于 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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!