Цвета кнопок Vuetify не работают
Я использую webpack для компиляции своего проекта vuejs и использую фреймворк vuetify, но я не могу заставить цвета работать. Например это:
Не выдает красную кнопку ошибки, а просто белую. Я включаю все файлы, используя это:
Может кто-нибудь сказать мне, что я забыл?
4 ответа
Обновить до vuetify v0.16.9 , чтобы использовать цвет
Если вы используете старую версию vuetify, вам может потребоваться использовать класс вместо цвета. У меня была такая же проблема, пока я не обновил версию.
Тем не менее, они также имеют некоторую документацию в отношении стилуса: https://vuetifyjs.com/en/style/colors
Несмотря на удобство, цветной пакет увеличивает размер экспорта CSS примерно на 30 КБ. Некоторые проекты могут требовать только предоставленные по умолчанию классы, которые создаются во время выполнения из начальной загрузки Vuetify. Чтобы отключить эту функцию, вам придется вручную импортировать и создавать основной файл стилуса. Для этого потребуется загрузчик стилуса и запись в файле .styl.
Для решения этой проблемы используйте:
Для получения дополнительной информации прочитайте эту статью: Мое приложение выглядит неправильно
Если вы не оберните свое приложение с помощью v-app, вот так .
Вы получите смешное поведение. Обертывание приложения в этом теге исправило это для меня. Я явно пропустил оператор ввода в руководстве по быстрой установке, хотя: D
Источник
Проблемы рендера семи тысяч элементов на Vuetify
Предисловие
На момент написания статьи я готовился к диплому и писал дипломный проект для нужд Московского Политеха. Моя задача — перенести существующий функционал из PHP-таблицы во что-то современное с кучей проверок, после чего дополнить данный функционал. Движок — Nuxt, материал-фреймворк: Vuetify.
После написания первичного кода, я, довольный, окинул взглядом свою таблицу и пошел спать. На следующий день мне предстояло импортировать 150+ проектов заказчика в свою таблицу. После импорта, я удивился тому, что браузер повис. Ну, бывает, просто переоткрою вкладку. Не помогло. Я впервые столкнулся с проблемой, что я рендерю слишком много, как для движка, так и для самого браузера. Пришлось начать думать.
Первые попытки
Что делает разработчик, когда сталкивается с проблемой? Идет гуглить. Это было первое, что я сделал. Как оказалось, проблема медленного рендера таблицы Vuetify встречается с куда меньшим числом элементов, чем у меня. Что советуют:
Рендерить элементы по частям через setInterval
Ставить условие, чтобы не рендерить элементы, пока не сработает хук жизненного цикла mounted()
Использовать v-lazy для последовательной отрисовки
При этом было предложение использовать компонент Virtual Scroller, позволяющий отрисовывать элементы по мере скролла, а предыдущие разрендеривать. Но этот компонент Vuetify не работает с таблицами Vuetify -_-
С «радостью» прочитав, что в Vuetify 3 (релиз через
полгода) производительность улучшится на 50%, я стал пробовать решения. Рендер элементов по частям ничего не дал, так как на условном тысячном элементе отрисовка начинала лагать, а к семи тысячам снова всё висло. Рендер элементов на mounted не дал вообще ничего, всё зависало, но зато после того, как страница загрузится (эээ, ура?). v-lazy хоть и рендерился быстрее, но рендерить 14 тысяч компонентов (Vuetify и Transition от Vue) тоже грустное занятие.
Даже после того, как элементы отрендериваются, скроллить по таблице невыносимо. Элементов много, логики много, браузер просто не выдерживает такого. Сдача всего этого стояла на следующий день. Нужно было выкручиваться, учитывая опыт StackOverflow, который хоть мне и не помог, но натолкнул на то, что делать на следующем шаге.
Решение 1. Intersection Observer
Итак, что мы имеем. v-lazy отрисовывать невозможно, это 14 тысяч компонентов. Vuetify Virtual Scroller не поддерживается в Vuetify Data Table из-за его структуры. Выходит, нужно писать свою реализацию. Кто умеет определять, докрутил ли пользователь до элемента? Intersection Observer. Internet Explorer нам не нужен, так что можем приступать.
Первая логичная попытка: использовать директиву v-intersect от самого Vuetify. И 7 тысяч директив также привели к длительному рендеру страницы =(. Значит, выбора нет и придется работать руками.
Теперь взглянем на сам handleObserve:
Итак, мы имеем 7 тысяч элементов, на которых смотрит наш Intersection Observer. Есть переменная observing, в которой содержатся все элементы с projectId и specialityId, по которым мы можем определять, нужно ли показывать нужный элемент в таблице. Осталось всего-лишь повесить v-if на нужный нам элемент и отрисовывать вместо него какую-нибудь заглушку. Ура!
А на саму таблицу вешаем v-once. Таблице будет запрещено менять свой рендер без $forceUpdate . Не очень красивое решение, но Vuetify непонятно чем занимается при скролле, запретим ему это делать.
Рендер занимает около секунды
Элементы разрендериваются вне их зоны видимости
Идет ререндер на каждое действие внутри таблицы
Но при этом работать с большой таблицей невыносимо. 7 тысяч событий на каждой клетке таблицы, бесконечный набор сообщений «Загрузка. «. Таблица была создана, чтобы выполнять действия быстро, и с этим решением мы релизнулись.
Однако было ясно (и заказчик это подчеркнул), что работать с таблицей тяжело. Нужно было что-то решать, но на момент тогда я зашел в тупик: Vuetify Data Table имеет ужасные проблемы с производительностью, которые признают даже разработчики фреймворка.
Не переписывать же мне их таблицу и создавать свой аналог?
Решение 2. Переписать таблицу и создать свой аналог
Решение, приведённое выше, может подойти для таблиц с куда меньшим количеством компонентов, содержимого и прочего. Но у нас с нашей логикой это позволило работать с таблицей, пренебрегая комфортом пользователей. Попробуем добавить немного комфорта.
Что мы поняли из первого решения:
Таблицы Vuetify лагучий отстой
Если показывать элементы только когда пользователь их увидит, рендер будет быстрее
Нужно как-то сократить время на первичную отрисовку, чтобы пользователь не видел бесконечную «Загрузку»
Можно заставить Intersection Observer реагировать чаще, чтобы рендерить элементы по мере скролла, а не когда скролл остановится или среагирует событие (300мс задержка)
Возвращаемся к Virtual Scroller. Он не работает в таблице Vuetify, так? А что если мы напишем свою таблицу с блекджеком и display: grid ? Зачем-то же его придумали.
Что нужно для Virtual Scroller? Фиксированная высота каждого элемента. Что нужно для Grid’ов? Фиксированная ширина каждого элемента и информация о количестве элементов. Бахнем CSS-переменные для последующего использования в CSS:
Потом пишем гриды по типу аля
И так далее для элементов внутри. Класс! А еще мы, зная ширину и количество элементов, можем задать ширину нашему Virtual Scroller (он сам по умолчанию туповат), а заодно и всем нашим элементам, чтобы не дай боже кто-то вышел за доступные ему границы
Примечание: если вы сделаете просто без scoped и решите, что будет хорошей идеей редактировать глобальные стили вне окружения компонента, то у меня для вас плохие новости: лучше так не делать вне каких-то App.vue, и стоит ознакомиться с тем, что это за v-deep.
Поехали: добавляем Virtual Scroller, пихаем в него проекты, после чего выводим последние. Сразу скажу: поддержки Expandable Items у нас тут нет, я вынес информацию о проекте во всплывающее окно. Жаль, конечно, что нельзя это отображать прямо в таблице, как делал Vuetify, но тогда придется помучаться с их скроллером, а он и так не особо хорошо работает. В общем, к делу:
Итого: на страницу, допустим, помещается 6 проектов (высота же у всех максимальная по факту), итого рендерится 6 строк + шапка. Колонок 50. Итого рендерится около 300 сложных компонентов. А вот это уже задача не уровня мстителей, 300 мы рендерить умеем.
Вспоминаем про лучший инструмент всех времен и народов v-lazy: он позволяет отрендерить элемент один раз и потом не перерендеривать его. Раньше мы пытались отрендерить 14 тысяч компонентов, сейчас 600 простых. Ну и оборачиваем все наши колонки (кроме шапки) в v-lazy. При горизонтальном скролле элементы подгружаются, и остаются отрендеренными до тех пор, пока сама строка таблицы не пропадет из области видимости и не разрендерится.
Видео с разницей, можно сравнить:
Плюсы такого решения:
Элементы перестали скакать как ненормальные
Нет нужды писать свою реализацию логики рендера/отрендера
Можем отказаться от v-once и всяких принудительных ререндеров аля $forceUpdate
Куда больше гибкости при верстке таблицы
Если используются выпадающие элементы (expand), нужно писать свою реализацию
Нужно верстать таблицу самому, без инструментов движка
Нет средств сортировки/группировки и прочего (мне было не нужно)
Для того, чтобы шапка всегда была отрендеренной, но скроллилась вместе со всеми, мне пришлось отслеживать событие Scroll и подгонять скролл шапки к скроллу основных элементов
Чтобы отображать таблицу в нужном мне проценте от высоты страницы, мне пришлось смотреть на window.innerHeight и применять его в CSS переменных и в значении высоты у VirtualScroll
Несмотря на то, что минусов визуально больше, значительное улучшение UX и скорости отрисовки значительно компенсирует затраты времени и изучения инструментов для реализации этой штуки.
Заключение
Я привел 2 варианта решения проблем с производительностью отрисовки таблиц в Vuetify. Оба решения достаточно сложные, просто сложные в разных аспектах. Оба так или иначе помогли мне решить мою проблему, и у обоих есть свои ограничения. Например, второй вариант мне нравится больше, но отсутствие средств Vuetify (сортировка/группировка и пр.) может оттолкнуть тех, кому это позарез нужно.
Зачем я это пишу? Я перегуглил половину интернета и не нашел простых решений своей проблемы. Наверное, как раз таки потому, что этих решений нет. Эти таблицы не предназначались для сложной логики, даже в условных гугловских таблицах элементов отрисовывается меньше, потому что там буквально один инпут, изредка с каким-то контентом, здесь же — гигантская куча логики.
И да: я пользовался дебагером производительности от Vue и смотрел, кто её потребляет. Зачастую там был буквально один-два компонента, и, заменив их на какой-то другой с похожей логикой, проблема не решалась — дело в их количестве, а не сложности (не считая таблицу Vuetify — там передается множество props’ов из компонента в компонент).
Надеюсь, что приведенные мной варианты натолкнут кого-то на решение его проблемы, а кто-то просто узнает что-то новое =). Будем вместе ждать стабильный Vue 3 со всей его экосистемой, как минимум Nuxt 3. Что-то обещают множество улучшений, может, часть костылей из этой статьи даже пропадет.
Источник
Стили Vuetify не видны
Я новичок в мире Vue, поэтому, пожалуйста, несите мои глупые вопросы.
У меня есть шаблонный код для проекта Vue, который я клонировал из: Vue Enterprise Boilerplate
Я хотел использовать компоненты Vuetify, поэтому я выполнил следующие шаги:
1. Клонировал vue-enterprise-templateplate
2. npm install vuetify —save
3. В моем main.js я добавил зависимость vuetify, например:
4. Я использую Vue CLI 3 (который поставляется с шаблоном), также я установил загрузчик CCS.
5. Теперь в моем app.vue у меня есть простая кнопка:
Но когда я запускаю приложение, я вижу только контур кнопки, но стили отсутствуют. Вот скриншот ниже:
Также здесь приведен снимок инструментов dev-tools:
Как вы можете видеть, ссылается на vuetify.min.css, я не могу отлаживать, почему это не ведет себя в соответствии с руководствами Vuetify.
Какие шаги мне не хватает?
Ответов: 2
Добро пожаловать в vuetiful мир vue.
Вы смотрите в теневой домик, проверьте элемент кнопки, а не элемент div внутри элемента кнопки. Элемент родительского элемента div будет иметь классы, такие как .primary .error, основанный на подсказке, которую вы даете.
Надеюсь, это поможет.
Я думаю, что это в основном проблема с корпоративным шаблоном кода с большим количеством пользовательского стиля, уже существующим, и противоречит кнопке Vuetify CSS или что-то в этом роде. Вероятно, вам придется либо перейти с шаблоном предприятия более полно (без Vuetify), либо перейти к более распространенным значениям по умолчанию Vue / Vuetify. например, с установкой vue-cli 3, просто:
Я знаю, что это не особенно полезно с точки зрения фактического ответа на вопрос, который вы задаете, но мое чувство кишки состоит в том, что вам, вероятно, придется либо пересмотреть этот подход, либо пойти с более распространенным vue + vuetify или попросить поставщиков шаблон для помощи при использовании альтернативной библиотеки пользовательского интерфейса (Vuetify) с этой конкретной реализацией сайта.
Источник
Vuetify Styles not visible
I am a beginner in the world of Vue, so please bear with my foolish question(s).
I have a boilerplate code for a Vue project which I cloned from: Vue Enterprise Boilerplate
I wanted to use Vuetify components, so I followed the following steps:
1. Cloned the vue-enterprise-boilerplate
2. npm install vuetify —save
3. In my main.js I added the vuetify dependency like:
4. I am using Vue CLI 3 (which comes with the boilerplate), also I have installed the CCS Loader.
5. Now in my app.vue, I have a simple button like:
But when I run the app, I only see the outline of the button, but the styles are missing. Here is a screenshot below:
Also here is the dev-tools snapshot:
As you can see, the vuetify.min.css is being referenced, I am unable to debug why this is not behaving as per the Vuetify guides.
What steps am I missing?
4 Answers 4
What fixed the issue for me was the adding of class .v-application at the top most html tag (or the first one after template tag). Usually if I add it all works but for some reason using vuitify 2.0.4 this didn’t worked (may be because I’m not using vue-cli and webpack but parcel.js).
So adding this class solved the same issue for me.
EDIT
Actually I just found why v-app was ignored. Since I’m using vuetify 2.0.4. without vue-cli and webpack I need to include the vuetify components by my self like so:
Which is then imported in the vue app like this:
So v-app wasn’t working as I didn’t included it in the list of components that I need for my app to work. More you can find here.
Welcome to the vuetiful world of vue.
You are looking into the shadow dom, please inspect the button element not the div element inside button element. The parent button element of the div will have classes like .primary .error based on the prop you give.
See the screenshot:
I hope this helps.
I think this is mostly a problem with the enterprise boilerplate code coming with a lot of UI styling already in place, and conflicting with the Vuetify button CSS or something along those lines. You’re probably going to need to either choose to go with the enterprise template more completely (without Vuetify), or go with the more common Vue/Vuetify defaults. e.g. with vue-cli 3 installed, just:
I know this isn’t particularly helpful in terms of actually answering the question you’re asking, but my gut feeling is that you will probably need to either reconsider that approach and go with the more mainstream vue+vuetify, or ask the providers of the boilerplate for help when using an alternative UI library (Vuetify) with that specific site implementation.
Источник