[JavaScript知识库]Vue2中如何优雅的实现dialog的封装

最近在看公司以前的项目时发现，很多表单内容较多的dialog是写在列表组件内的。一个列表页的查询功能，其已经包含了搜索的表单，再加上列表中的其他功能，例如：详情、删除、导出、导入、提交等操作都写在这一个组件了，维护起来十分繁琐。所以，当面对这种弹窗式的内容添加的需求时，要么是跳转路由到新的界面，要么是单独封装一个dialog组件。

这里借助这个机会展示一下dialog组件的封装。

组件内部只有一个dialog

dialog的控制可见变量最好写在该组件内，不要写在父组件通过传props的方式来实现，不然还要在父组件再维护一个变量，也是不够特别优雅。

<template>
        <el-dialog 
            title="新增"
            :visible="visibleDia"
            @close="closeDia"
            fullscreen
        >
        
            <!-- 弹窗内容自定义 -->

            <div slot="footer">
                <el-button @click="saveInfo" type="primary">保存</el-button>
                <el-button @click="closeDia" type="primary" plain>取消</el-button>
            </div>
        </el-dialog>
</template>
<script>
export default {
    name: 'SaveDialog',
    data() {
        return {
            visibleDia: false,
        }
    },
    methods: {
        openDia() {
            this.visibleDia = true
        },
        closeDia() {
            this.visibleDia = false
        },
        saveInfo() {
        // 告诉父组件，保存成功
			this.$emit('saveSuccess', true)
			this.closeDia()
		}
    }
}
</script>

父组件调用

父组件调用弹窗组件时绑定一个ref属性，可通过$refs调用此节点里的openDia方法，即可打开弹窗；关闭弹窗为弹窗组件内的逻辑，等事件处理完进行自关闭即可。

<template>
    <div>


		<!-- 页面其他内容 -->
		
		<el-button @click="handleAdd">新增</el-button>
		
		<save-dialog
			ref="saveDialog"
			@saveSuccess="saveSuccess"
		 />
    </div>    
</template>
<script>
import SaveDialog from './SaveDialog.vue'
export default {
    name: 'Index',
    components: { SaveDialog },
    methods: {
        handleAdd() {
            this.$refs.saveDialog.openDia()
        },
        saveSuccess() {
        	// 此方法被调用时，说明弹窗的新增内容已完成
		}
    }
}
</script>