当前位置：首页 > news >正文

如何对element弹窗进行二次封装

news 2025/8/18 9:15:20

方式一使用$refs

个人比较喜欢用这种的通过$refs打开的同时还能给弹窗组件传参一些框架使用的也是这种方式

父组件

<template><div><el-button type="text" @click="handleDialogOpen">打开嵌套表单的 Dialog</el-button><Dialog ref="Dialog"></Dialog></div>
</template><script>
import Dialog from '@/components/Dialog.vue'
export default {components: {Dialog},data() {return {}},methods: {handleDialogOpen() {this.$refs.Dialog.open('打开弹窗')}},mounted() {}
}
</script><style lang="less" scoped></style>

子组件

<template><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog>
</template><script>
export default {data () {return {dialogFormVisible: false,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'}},methods: {open(value) {console.log(value, '父组件传递过来的值')this.dialogFormVisible = true}}
}
</script><style lang="scss" scoped></style>

方式二封装弹窗内的内容弹窗组件直接放在父组件中

父组件

<template><div><el-button type="text" @click="handleDialogOpen">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><dialogForm/></el-dialog></div>
</template><script>
import dialogForm from '@/components/form.vue'
export default {components: {dialogForm},data() {return {dialogFormVisible: false}},methods: {handleDialogOpen() {this.dialogFormVisible = true}},mounted() {}
}
</script><style lang="less" scoped></style>

子组件

<template><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form>
</template><script>
export default {data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'}},methods: {open(value) {console.log(value, '父组件传递过来的值')this.dialogFormVisible = true}}
}
</script><style lang="scss" scoped></style>