Question

我正在使用bootstrap-vue软件包。在某些组件中，我有三个 card-flip 组件：

<b-row>
    <b-col lg="4">
        <card-flip :order="'fifth'"></card-flip>
    </b-col>
    <b-col lg="4">
        <card-flip :order="'sixth'"></card-flip>
    </b-col>
    <b-col lg="4">
        <card-flip :order="'seventh'"></card-flip>
    </b-col>
</b-row>

在此翻牌组件内部，我根据:order属性显示三个不同的按钮：

<template>
    <!-- some not related content -->
    <template v-if="order === 'fifth'">
        <button class="card-flip__button card-flip__button--2"
                v-b-modal.modalStandard="">
            Sprawdź ofertę1
        </button>
    </template>
    <template v-if="order === 'sixth'">
        <button class="card-flip__button card-flip__button--2"
                v-b-modal.modalPremium="">
            Sprawdź ofertę2
        </button>
    </template>
    <template v-if="order === 'seventh'">
        <button class="card-flip__button card-flip__button--2"
                v-b-modal.modalPremiumPlus="">
            Sprawdź ofertę3
        </button>
    </template>
    <modal-standard></modal-standard>
    <modal-premium></modal-premium>
    <modal-premium-plus></modal-premium-plus>
</template>

我正在使用这种template语法来创建不必要的div。

问题是，当我单击此按钮中的某些按钮时，它会打开正确的模态，但要比前一个模态高三倍。

我正在<b-modal>组件内的modal-*中添加正确的ID。

Answer 1

之所以这样做，是因为每个模态都会渲染3次，每次卡翻转都渲染一次。您还应该在卡片翻转模板中为每个模式添加<div style="text-align: center;"><input type="text" id="a" style="text-transform:uppercase; font-family: open-sans, sans-serif; font-style: normal; font-weight: 300; color: black; font-size: 24px; text-align: left;" maxlength="8" autofocus></div> <div class="sbmt"> <button type="submit" class="bttn">Continue</button> </div>等。

Bootstrap-Vue模态开放三次

1 个答案: