Макет в приложении vue.js2.5 / vuetify

В приложении vue.js2.5 / vuetify я использую следующий макет с 2 входами, когда мне нужны 2 столбца на очень маленьких устройствах:

                        <v-flex xs12 sm6>
                            <v-text-field
                                    label="Created at"
                                    v-model="artist_created_at_label"
                                    readonly disabled
                                    v-show="!is_insert"
                            ></v-text-field>
                        </v-flex>

                        <v-flex xs12 sm6 class="pl-4">
                            <v-text-field
                                    label="Updated at"
                                    v-model="artist_updated_at_label"
                                    readonly disabled
                                    v-show="!is_insert && artist_updated_at_label"
                            ></v-text-field>
                        </v-flex>

я использую

class="pl-4" 

чтобы правый ввод (artist_updated_at_label) имел расстояние от левого ввода (artist_created_at_label), но как от него избавиться сверхмалые устройства, так как они мне не нужны в этом случае?

Спасибо !

0
0
68
1

Ответы 1

Вы можете получить доступ к текущему размеру области просмотра с $vuetify.breakpoint (документы).

Он реактивный, поэтому вы можете сделать свой класс условным, чтобы он отображался только в произвольные размеры (например, smAndUp исключает xs).

:class="{'pl-4': $vuetify.breakpoint.smAndUp}"

Другие вопросы по теме