Vuetify перерывы начальной загрузки D-Flex - PullRequest
0 голосов
/ 15 апреля 2019

Я использую Vuetify для некоторых компонентов. Я добавляю его в свой App.vue:

<template>
    <v-app style="background: transparent !important;">
        <nprogress-container></nprogress-container>
        <v-content>
            <v-container fluid>
                <v-flex shrink>
                    <router-view></router-view>
                </v-flex>
            </v-container>
        </v-content>
    </v-app>
</template>

Мне это нужно только для небольших частей компонентов. Но это также нарушает мой стиль начальной загрузки. Он переписывает загрузчик .d-flex со своим собственным .d-flex с flex-grow: 1. И это нарушает стили моего приложения.

Один компонент с классами начальной загрузки:

<div v-if="lineType === 'main-line'"
             @click="toggleHiddenBlock"
             @mouseover="onMouseMove"
             @mouseout="onMouseMove"
             class="main-line m-0 d-flex flex-column flex-sm-row
                    justify-content-between justify-content-sm-start
                    align-items-center">
            <div class="main-line__img flex-grow-0">
                <img :src="imgSrc" alt="Fin Info" class="main-line__img-icon">
            </div>
            <div class="main-line__border-wrapper
                        d-flex flex-column flex-sm-row flex-grow-1
                        justify-content-between align-items-center">
                <p class="main-line__text text-center text-sm-left">{{text}}</p>
                <p class="main-line__money m-sm-0 ml-sm-auto flex-grow-0 text-center text-sm-right">
                    <span v-show="false" class="main-line__money-minus">–</span>
                    205 378<span class="main-line__money-cents">.00</span> $
                </p>
            </div>
        </div>

Все элементы внутри компонента начинают сгибаться-растут, и это не то, чего я действительно хочу. Vuetify rewrite bootstrap .d-flex своим собственным .d-flex, потому что он использует !important.

Как я могу решить эту проблему?

  1. Я пытался переписать его своим собственным !important, но это не помогло.
  2. Я пытаюсь использовать сжатие для v-flex, но это также не помогает.

В результате я получаю это: http://i.shotnes.com/u/2778/0415/screenshot_17777.png

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...