封装elementUI dialog组件实现自定义弹框

业务需要实现一个能够自定义内容的confirm弹框, 决定在elementUI dialog基础上封装实现。记录下实现步骤

封装组件

  1. 首先基于dialog组件封装一个组件
  2. 使用渲染函数可以接收
export default {
    name: 'CustomConfirm',
    props: {
        message: String | Object,
        title: String | Object,
        options: Object,
        resolveFn: Function,
        rejectFn: Function,
    },
    data() {
        return {
            visible: true,
        };
    },
    methods: {
        confirm() {
            this.visible = false;
            this.resolveFn();
        },
        cancel() {
            this.visible = false;
            this.rejectFn = false;
        },
    },
    render(h) {
        return (
            <el-dialog visible={this.visible} width='400px' before-close={this.cancel}>
                <span slot='title'>{this.title}</span>
                <span>{this.message}</span>
                <span slot='footer' class='dialog-footer'>
                    <el-button onclick={this.cancel}>取 消</el-button>
                    <el-button type='primary' onclick={this.confirm}>
                        确 定
                    </el-button>
                </span>
            </el-dialog>
        );
    },
};

注册组件

  1. 实现和elementui中$comfirm的调用形式

     a. 为了能够以全局函数的形式调用, 将其以函数形式挂载到Vue原型上
     b. 以promise的形式返回
    
Vue.prototype.$customConfirm= (message, title, options) => {
    let div = document.getElementById('custom-confirm');
    if (!div) {        
        div = document.createElement('div');
        document.body.appendChild(div);
        div.id = 'custom-confirm';
    }
    const TipConstructor = Vue.extend(CustomConfirm)
    const p = new Promise((resolve, reject) => {
        const instance = new TipConstructor({
            propsData: {
                title,
                message,
                options,
                resolveFn: resolve,
                rejectFn: reject
            }
        });
        instance.$mount(div);
    })
    return p;
}

调用方式

  1. 实现title和mssage内容自定义支持VNode、String类型
this.$customConfirm(
    <span>
        <i class='iconfont test'></i>
    </span>,
    <span>
        此操作会删除登录账号,是否确认<span class='text-highli'>删除账号</span>?
    </span>,
    {
        type: 'warning',
    },
)
.then(() => {})
.catch(() => {});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要优雅地实现父子组件弹窗,可以使用 Element UI 的 Dialog 组件。下面是一种优雅的实现方式: 1. 在父组件中,使用 Dialog 组件作为弹窗容器,通过 v-model 控制弹窗的显示与隐藏状态。 ```html <template> <div> <el-button @click="showDialog">打开弹窗</el-button> <el-dialog v-model="dialogVisible" title="弹窗标题"> <!-- 弹窗内容 --> <child-component></child-component> <!-- 弹窗底部按钮 --> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="saveChanges">确 定</el-button> </span> </el-dialog> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { dialogVisible: false }; }, methods: { showDialog() { this.dialogVisible = true; }, saveChanges() { // 处理弹窗关闭后的逻辑 this.dialogVisible = false; } } }; </script> ``` 2. 在子组件中,编写需要在弹窗中展示的内容和逻辑。 ```html <template> <div> <!-- 子组件的内容 --> </div> </template> <script> export default { // 子组件逻辑 }; </script> ``` 在父组件中,通过 v-model 控制 Dialog 组件的显示与隐藏状态,点击按钮打开弹窗。在弹窗中,可以使用插槽 slot 分别定义弹窗的内容和底部按钮。在底部按钮中,可以定义确定和取消按钮的点击事件,处理弹窗关闭后的逻辑。 子组件中可以根据需求编写需要在弹窗中展示的内容和逻辑。 这样就能优雅地实现父子组件弹窗。希望对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值