Question

我正努力在使用Bootstrap Vue组件构建的弹出窗口中显示动态内容。

我想先显示一个表单，当表单成功提交后，我想显示确认文本。

我试图在弹出式窗口内容中使用v-show指令来管理它，但没有成功。当然，所有内容都会通过v-show指令显示在div之外。

结果是，它仅在弹出框内显示一个空的弹出框（关闭链接除外）。

这是我的组成部分：

<template>
  <div class="email-content">
    <div class="email-content__buttons">
      <b-button variant="blue" class="fv-round" id="testEmailSend" :disabled="isPopoverDisplayed" @click="isPopoverEmailFormDisplayed = true">{{locales.testButton}}</b-button>
      <b-popover target="testEmailSend"
                 :show="isPopoverDisplayed"
                 placement="auto"
                 @show="isPopoverEmailFormDisplayed = true"
                 @shown="setFocusOnPopoverForm">
        <template>
          <b-btn @click="isPopoverEmailFormDisplayed = false" class="close">
            <span class="d-inline-block">&times;</span>
          </b-btn>
        </template>
        <div v-show="isPopoverConfirmationDisplayed">
          <b-form-group :label="`${locales.sendTo} :`" label-for="popoverEmailForm" class="mb-1" :invalid-feedback="locales.emailMandatory">
            <b-input-group>
              <b-form-input ref="emailTestReceiver" id="popoverEmailForm" :validationState="$v.emailTestReceiver" size="sm" v-model="emailTestReceiver"></b-form-input>
              <b-input-group-append>
                <b-btn @click="sendEmailTest" size="sm" :disabled="$v.$invalid" variant="primary">Ok</b-btn>
              </b-input-group-append>
            </b-input-group>
          </b-form-group>
        </div>
      </b-popover>
      <div v-show="isPopoverConfirmationDisplayed" placement="auto">
        {{locales.emailSentConfirmation}}
      </div>
      <b-button variant="primary" class="fv-round" @click="saveTemplates">{{locales.saveButton}}</b-button>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex';
  import { required, email } from 'vuelidate/lib/validators';
  import feedbackHandler from '@/components/_shared/Alerts/ErrorHandler';
  import SellerEmailContentConfig from '@/components/SellerDashboard/SellerEmail/SellerEmailContent/SellerEmailContentConfig';
  import locales from './sellerEmailContent.locales.json';

  export default {
    name: 'SellerEmailContent',
    data() {
      return {
        locales,
        emailTestReceiver: '',
        isPopoverEmailFormDisplayed: false,
        isPopoverConfirmationDisplayed: false
      }
    },
    validations: {
      emailTestReceiver: {
        required,
        email
      }
    },
    computed: {
      isPopoverDisplayed() {
        return this.isPopoverEmailFormDisplayed || this.isPopoverConfirmationDisplayed;
      }
    },
    methods: {
      ...mapActions({
        sendEmail: 'sendAuthCustomEmail'
      }),
      async sendEmailTest() {
        const { error: errorSending } = await this.sendEmail({ type: 'Seller', email: this.emailTestReceiver });
        if (!errorSending) {
          this.isPopoverEmailFormDisplayed = false;
          this.isPopoverConfirmationDisplayed = true;
          setTimeout(() => { this.isPopoverConfirmationDisplayed = false }, 3000);
        } else feedbackHandler.showError(errorSending);
      },
      setFocusOnPopoverForm() {
        this.$refs.emailTestReceiver.focus();
      }
    },
  }
</script>

我的最后一个是您在上面看到的，使用了一个将两种情况（要显示的表单或确认）结合在一起的计算属性。

有什么主意吗？我一定错过了什么：）

Bootstrap vue popover中带有v-show的动态内容

0 个答案: