Vue에서 대화 상자와 모달 상자를 구현하는 방법은 무엇입니까?

<transition name="modal">
  <div class="modal-mask" v-if="showModal">
    <div class="modal-wrapper">
      <div class="modal-container">
        <h3>我是标题</h3>
        <div class="modal-body">
            这里是对话框的内容
        </div>
        <div class="modal-footer">
          <button class="modal-default-button" @click="showModal = false">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</transition>

data: {
  showModal: false
},
methods: {
  toggleModal: function(){
    this.showModal = !this.showModal;
  }
}

<el-dialog :visible.sync="dialogVisible">
  <span slot="title">对话框标题</span>
  <div>这里是对话框的内容</div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary">确 定</el-button>
  </div>
</el-dialog>

data() {
  return {
    dialogVisible: false
  }
}

<template>
  <div class="dialog-mask" v-if="value">
    <div class="dialog">
      <div class="dialog-header">
        <h3>{{title}}</h3>
        <span class="close-btn" @click="close()">X</span>
      </div>
      <div class="dialog-body">
        <slot name="content"></slot>
      </div>
      <div class="dialog-footer">
        <button class="confirm-btn" @click="confirm()">确定</button>
        <button class="cancel-btn" @click="close()">取消</button>
      </div>
    </div>
  </div>
</template>