vue中el-dialog打開與關閉的幾種方式

更新時間：2024年01月25日 15:48:48 作者：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打開與關閉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: