有没有一个好的方式基于 vue3 封装 dialog 这种公共视图组件？

  • Z时代
  • 2024-03-06
  • 分类：IT

有没有一个好的方式基于 vue3 封装 dialog 这种公共视图组件？

问题：有没有一个好的方式基于 vue3 封装 dialog 这种公共视图组件?

比如通过很多列表页通过 dialog 弹出编辑表单，提交更新数据。
在这个弹出框里，分为新建表单和编辑表单，其中表单几乎是一模一样，在其他页面中的弹出框里标题、提交按钮、关闭按钮几乎是一模一样。

那么能不能做成函数式调用弹出 dialog 编辑表单呢？

比如我期待的伪代码如下：
JS部分只有这些业务逻辑

    methods:{
        // 页面用户数据 编辑按钮绑定事件
        editRowData(data,id ) {
            const is_update = id?true:false
            const dialog =this.createDialog({
                title:id?"编辑用户数据":"新增用户数据",
                element_form_id:"#userEditForm",
                form:data,
                rules:[
                    //...
                ]
            }).then((submitData) =>{
                if(is_update){
                    axios.post(`/user/{id}`,submitData).then(this.dialog("更新成功"))
                }else{
                    axios.post('/user/new',submitData).then(this.dialog("新建成功"))
                }
                dialog.close() // 关闭模态框
            }).catch(()=>{
                // ...
            })
        },
}

视图部分，也只需要填写表单部分：

<el-form :model="form" label-width="120px" id="userEditForm">
    <el-form-item label="form.name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
</el-form>

以上的好处是不需要定义一堆的表单变量到 data 中，不需要定义标题到 data 中，也不需要维护dialog 的显示隐藏的变量，关闭dialog的事件，因为写的多了，会发现到处都是重复性的事件定义。一个页面有多个可弹出式编辑的功能，就会存在多处重复代码。

        groupHandleClose() {
            this.groupDialogVisible = false
        },
        groupHandleSubmitForm() {
            //...
        },
        userHandleClose() {
            this.userDialogVisible = false
        },
        userHandleSubmitForm() {
            //...
        },

我使用的element plus的ui组件，在实践过程中遇到了一些问题。
比如统一维护一个模态框的标题，按钮等外部框架:

<template>
    <el-dialog v-model="FormDialogVisible" @closed="closedDialog" :title="FormDialogTitle" width="400px">
        <slot></slot>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="danger" @click="FormHandleClose()">Cancel</el-button>
                <el-button type="primary" @click="FormHandleSubmitForm()">Submit</el-button>
            </span>
        </template>
    </el-dialog>
</template

想着在外部通过组件形式进行引用，并用 <slot></slot> 进行将表单数据嵌入到组件中使用，实际发现他的数据访问是访问不到组件内部的。

<CommonDialogVue @submit="userEditSubmit" @close="userEditClose" :dialogVisible="userEditVisible">
<el-form :model="form" label-width="120px" id="userEditForm">
    <el-form-item label="form.name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
</el-form> 
</CommonDialogVue>

而且也并不能很好的动态创建组件，以及调用组件绑定事件。所以目前我还是用老的方式，哪里用到，就复制一份代码改改，求助大佬，对于一个页面多处dialog表单，以及多个页面多个 dialog 表单，有没有更好的代码维护方式?

以上是 有没有一个好的方式基于 vue3 封装 dialog 这种公共视图组件？ 的全部内容， 来源链接： utcz.com/p/937288.html

回到顶部