Question

我正在使用vue-material对话框来显示表单，我这样做：

LeftSidenav.vue - template：

<md-button class="list-button" id="formBtn" @click="openFormDialog()">
      <md-icon>description</md-icon>
      <span class="sidenav-item-text">{{$t('form_dialog')}}</span>
      <md-tooltip md-delay="100" md-direction="right">{{$t('form_dialog'')}}</md-tooltip>
    </md-button>
    <md-dialog md-open-from="#formBtn" ref="formDialog">
      <md-dialog-title>Title</md-dialog-title>

      <md-dialog-content>
        <form-dialog></form-dialog>
      </md-dialog-content>
</md-dialog>

LeftSidenav.vue - 脚本：

methods: {
  openFormDialog() {
    this.$refs.formDialog.open();
  },
  closeFormDialog() {
    this.$refs.formDialog.close();
  },
},

FormDialog.vue：

<template>
  <div>
    Test
    <div class="buttons">
      <md-button class="md-raised" @click="closeFormDialog">Cancel</md-button>
      <md-button class="md-raised">Submit</md-button>
    </div>
  </div>
</template>

问题在于我的FormDialog我不知道如何访问closeFormDialog方法，如何通过单击FormDialog.vue上的取消按钮关闭我的Dialog？

Answer 1

<el-dialog
  :visible="dialogVisible"
  title="Contact Form View"
  ref="changeUserId"
  :before-close="() => dialogVisible = false"
>
  <contact-form />
</el-dialog>

在关闭前检查它是否与元素ui函数相同

Vue-material对话框：关闭对话框

1 个答案: