vue中el-dialog打开与关闭的几种方式
作者：hikktn
本文主要介绍了vue中el-dialog打开与关闭的几种方式,包括 update:visible, ref和兄弟 bus这三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
第一种，使用 update:visible
父组件
<child-dialog :visible="visible"></child-dialog>
子组件
<template>
<el-dialog title="接口实例详情" @open="onOpen" @close="onClose">
// 主体内容
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
visible: Boolean
},
methods: {
// 弹出框打开事件
onOpen() {},
onClose() {
this.$refs['GxptServiceDialog'].resetFields()
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs['gialog'].validate(valid => {
if (!valid) return
this.close()
})
}
}
}
第二种 ref
父组件
<child-list></child-list> <child-dialog ref="dialog"></child-dialog>
this. r e f s . d i a l o g . v i s i b l e = t r u e ; 在兄弟组件中 t h i s . refs.dialog.visible = true; 在兄弟组件中 this. refs.dialog.visible=true;在兄弟组件中this.parent.$refs.dialog.visible = true;
子组件
<template>
<el-dialog :title="title"
:visible.sync="visible"
:width="width"
append-to-body
:close-on-click-modal="false"
@close="close">
<span slot="footer" class="dialog-footer">
<div style="text-align: right;padding-bottom:10px">
<el-button size="medium" type="primary" @click.native="handleSave()">确 定</el-button>
<el-button size="medium" @click.native="close">取 消</el-button>
</div>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
}
},
methods: {
close() {
this.visible = false;
}
}
}
第三种 兄弟 bus
父组件
<child-list></child-list> <child-dialog></child-dialog>
import Vue from 'vue' export default new Vue()
子组件
<template>
<el-dialog title="接口实例详情" @open="onOpen" @close="onClose" :visible.sync="visible">
// 主体内容
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false
}
},
mounted() {
bus.$on('isVisible', data => {
this.visible = data
})
},
methods: {
// 弹出框打开事件
onOpen() {},
onClose() {
this.$refs['dialog'].resetFields()
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs['gialog'].validate(valid => {
if (!valid) return
this.close()
})
}
}
}
使用
bus.$emit(‘isVisible’, true)
控制弹出框打开与关闭
到此这篇关于vue中el-dialog打开与关闭的几种方式的文章就介绍到这了,更多相关vue el-dialog打开与关闭内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！