Почему ширина игнорируется при использовании flex в Vuetify 3?
Используя Vuetify 3, я пытаюсь настроить собственную нумерацию страниц для таблицы. Все идет хорошо, за исключением того факта, что <v-select> игнорирует ширину при использовании flex.
<template>
<v-app>
<v-row class = "mt-2">
<v-col cols = "12" sm = "12">
<div class = "d-flex flex-wrap ga-3 justify-end">
<!-- Items per Page -->
<v-select
class = "d-flex align-center"
label = "Items per page"
density = "comfortable"
:model-value = "itemsPerPage"
:items = "['5', '10', '25', '100']"
variant = "outlined"
@update:model-value = "itemsPerPage = parseInt($event,10)"
style = "max-width: 150px"
></v-select>
<p class = "d-flex align-center">
{{ page * itemsPerPage - itemsPerPage + 1 }} - {{ page *
itemsPerPage }} of {{ total }}
</p>
<!-- Pages selection -->
<v-pagination
class = "d-flex align-center"
density = "comfortable"
rounded = "circle"
v-model = "page"
:length = "pageCount"
:total-visible = "6"
></v-pagination>
</div>
</v-col>
</v-row>
</v-app>
</template>
И сценарная часть (только ради ref, не более того)
<script setup>
import { ref } from 'vue'
const page = ref(1)
const itemsPerPage = ref(10)
const total = ref(150)
const pageCount = ref(10)
</script>
Если вы посмотрите на <v-select>, то увидите, что style = "max-width: 150px" полностью игнорируется (в основном из-за class = "d-flex align-center", но я не знаю, как заставить его работать вместе).
Вот Vuetify Playground, чтобы в живом фрагменте лучше понять, что я имею в виду.
Обновлено:
Это первое изображение, как оно выглядит сейчас
И вот как я хочу, чтобы select выглядел (плюс выравнивание по центру, которое я не могу установить, кроме использования полей или отступов, но мне нужна более динамичная ситуация)
Любое предложение?
Возможно, я неправильно понимаю, но я не вижу, чтобы стиль был переопределен или проигнорирован. Элемент div, который является корневым элементом v-select, никогда не увеличивается более чем на 150 пикселей, что означает, что стиль max-width применяется правильно. Кроме того, если бы оно было переопределено, оно было бы вычеркнуто в инспекторе DOM, а это не так. Классы d-flex align-center находятся на родственном элементе, поэтому эти два стиля элемента не влияют друг на друга. Каким именно должен быть желаемый вид?
@yoduh, если вы откроете игровую площадку и удалите class = "d-flex align-center" внутри v-select, вы увидите, как выделение увеличивается в ширину (но оно потеряет выравнивание по центру). Я хочу сохранить эту ширину, не теряя гибкого выравнивания. Я обновлю вопрос двумя сравнительными изображениями.
Понятно, значит, я неправильно понял. Простите за это. Думаю, у меня есть решение, я опубликую его в ближайшее время.
@yoduh, твой ответ работает идеально, как и предполагалось, спасибо! Ваш ответ идеален!
Ответы 1
Глядя на DOM с помощью инспектора, часть проблемы заключается в том, что внутренний элемент div с классом v-input__control не использует полную ширину родительского div. Установка этого элемента на width: 100% поможет.
<style scoped>
.v-select :deep(.v-input__control) {
width: 100%;
}
</style>
Другая проблема заключается в том, что для элемента входных данных зарезервировано некоторое пространство.
Если вы хотите использовать это пространство, вам нужно избавиться от этого элемента. На самом деле это можно сделать с помощью реквизита скрыть детали
Скрывает подсказки и ошибки проверки. Если установлено значение «авто», сообщения будут отображаться только в том случае, если есть сообщение (подсказка, сообщение об ошибке, значение счетчика и т. д.) для отображения.
Добавьте реквизит следующим образом:
<v-select
class = "d-flex align-center"
label = "Items per page"
density = "comfortable"
:model-value = "itemsPerPage"
:items = "['5', '10', '25', '100']"
variant = "outlined"
@update:model-value = "itemsPerPage = parseInt($event, 10)"
style = "max-width: 150px"
hide-details
></v-select>
Это должно привести к желаемому виду.
Вы правы, что встроенный стиль style = "max-width: 150px" в вашем v-select переопределяется классом d-flex. Вот два подхода к достижению желаемой ширины вашего v-select при сохранении макета flexbox.