Vue2中实现dialog的封装方式
作者：聂大哥
这篇文章主要介绍了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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。