Javascript Buefy收割台中的模式关闭按钮

各位!！ 我在Buefy上有模态窗口。此模式在调用方法时打开：

    onEditHandler(selectedPlan) {
      const Component = Vue.extend(Plan);
      this.$buefy.modal.open({
        parent: this,
        component: Component,
        hasModalCard: true,
        trapFocus: true,
        scroll: 'keep',
        ariaModal: true,
        customClass: 'dialog',
        canCancel: 'x',
        props: {
          isActive: true,
          plan: selectedPlan,
          roles: this.roles,
          plans: this.data,
        },
        events: {
          submit() {
          },
          close() {
          },
        },
      });
    }

计划包含代码：

名称
取消
更新

您可以在模式标题上添加一个关闭按钮，如下所示：

...
<header class="modal-card-head">
   <h2 class="modal-card-title">Name</h2>
   <button type="button" class="delete" @click="handleCancel" />
</header>
...

我解决了这个问题，所以：

onEditHandler(selectedPlan) {
const Component = Vue.extend(Plan);
this.$buefy.modal.open({
  parent: this,
  component: Component,
  hasModalCard: true,
  trapFocus: true,
  scroll: 'keep',
  ariaModal: true,
  customClass: 'card-form-modal',
  canCancel: ['outside'],
  props: {
    plan: selectedPlan,
    roles: this.roles,
    plans: this.data,
  },
  events: {
    submit() {
    },
    close() {
    }
  },
});
this.changeModalPosition();

}

计划包括

<template>
<validation-observer v-slot="{ handleSubmit }" ref="contactObserver">
  <div class="modal-card">
    <header class="modal-card-head">
      <h2 class="modal-card-title">Name</h2>
      <button class="modal-close is-large" @click="$emit('close')"></button>
    </header>
    <section class="modal-card-body">
        <validation-provider v-slot="{ errors }" rules="required">
            <b-field label="Name"
                     :type="{ 'is-danger': errors.length }"
                     :message="errors + [ '&nbsp;' ]">
              <b-input v-model="name"></b-input>
            </b-field>
          </validation-provider>
    </section>
    <footer class="modal-card-foot buttons is-right">
        <button class="button" type="button" @click="cancel">Cancel</button>
        <button class="button is-success"
                @click="handleSubmit(submit)">Update</button>
    </footer>
  </div>
</validation-observer>

名称
取消
更新

和截图

有助于理解的评论

<template>
<validation-observer v-slot="{ handleSubmit }" ref="contactObserver">
  <div class="modal-card">
    <header class="modal-card-head">
      <h2 class="modal-card-title">Name</h2>
      <button class="modal-close is-large" @click="$emit('close')"></button>
    </header>
    <section class="modal-card-body">
        <validation-provider v-slot="{ errors }" rules="required">
            <b-field label="Name"
                     :type="{ 'is-danger': errors.length }"
                     :message="errors + [ '&nbsp;' ]">
              <b-input v-model="name"></b-input>
            </b-field>
          </validation-provider>
    </section>
    <footer class="modal-card-foot buttons is-right">
        <button class="button" type="button" @click="cancel">Cancel</button>
        <button class="button is-success"
                @click="handleSubmit(submit)">Update</button>
    </footer>
  </div>
</validation-observer>