Превосходный шрифт Vue, если код перемещен - PullRequest
Новая
       7

Превосходный шрифт Vue, если код перемещен

0 голосов
/ 12 ноября 2018

У меня есть несколько кнопок навигации с потрясающими иконками.«Предыдущий» имеет левую стрелку.«Далее» имеет правую стрелку.Когда оставлено в их оригинальном заказе, все работает как ожидалось.Когда я переставляю кнопки, значок со стрелкой «Предыдущий» переворачивается, чтобы быть направленным вправо.Я пытался использовать разные значки (шеврон-влево / вправо), и я получаю то же самое поведение.

Это нормальное поведение, о котором я не знаю, или ошибка, или что-то еще полностью?

Порядок 1: 

        <button v-if="showPrev()" class="col-md-2 mb-3 btn btn-outline-info" @click="prev()"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showSubmit()" class="col-md-2 mb-3 btn btn-success" @click="next()"> SUBMIT  <i class="icon-large fas fa-check"></i></button>
        <button v-else-if="showFinish()" class="col-md-2 mb-3 btn btn-outline-danger" @click="finish()"> FINISH  <i class="icon-large fas fa-check"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showNext()" class="col-md-2 mb-3 btn btn-outline-info" @click="next()"> NEXT  <i class="icon-large fas fa-arrow-right"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

Выход 1

Порядок 2: 

        <button v-if="showPrev()" class="col-md-2 mb-3 btn btn-outline-info" @click="prev()"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showNext()" class="col-md-2 mb-3 btn btn-outline-info" @click="next()"> NEXT  <i class="icon-large fas fa-arrow-right"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showSubmit()" class="col-md-2 mb-3 btn btn-success" @click="next()"> SUBMIT  <i class="icon-large fas fa-check"></i></button>
        <button v-else-if="showFinish()" class="col-md-2 mb-3 btn btn-outline-danger" @click="finish()"> FINISH  <i class="icon-large fas fa-check"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

Вывод 2

Попытка MCVE: (Потрясающие шрифты не отображаются при создании фрагментов SOВоспроизведение невозможно. Если я что-то упустил, прокомментируйте и я отредактирую) 

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="card p-0 mt-5">
  <div class="row pt-3">
    <div class="col-md-3"></div>

    <button class="col-md-2 mb-3 btn btn-outline-info"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>

    <button class="col-md-2 mb-3 btn btn-outline-info"> NEXT  <i class="icon-large fas fa-arrow-right"></i></button>

    <button class="col-md-2 mb-3 btn btn-success"> SUBMIT  <i class="icon-large fas fa-check"></i></button>

    <div class="col-md-3"></div>
  </div>
</div>

1 Ответ

0 голосов
/ 13 ноября 2018

Проблема в выражениях 'vue-if'.Когда происходит сбой vue-if и кнопка не отображается, следующая отображаемая кнопка отображает значок, который не отображался из-за vue-if.

Просто оборачивая комбинацию кнопки / значка вdiv и выполнение проверки vue-if решают проблему. 

        <div v-if="showPrev()" class="col-md-2 mb-3 ">
            <button class="btn btn-lg btn-outline-info" @click="prev()"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>
        </div>
...