Комментарии 14
CSS модули
особенно приятно работать, так как вам не придётся использовать строки в своих классах
что? вы одну строку заменили другой, с жестким указанием имени класса
Vue также позволяет вам переименовывать объект, так что вам не нужно обращаться к ним с помощью $style в вашем шаблоне, если вы этого не хотите
вообще ничего не понятно, как можно переименовать объект, если ты напрямую ссылаешься на название поля объекта?
сегодня как раз столкнулся с тем что нужно было поменять цсс слота внутри scoped компонента, вконце сделал prop в которое передавал цсс свойство, после прочтения статья перепишу этот код немного.
На самом деле плюс css модулей больше не в предотвращении опечаток, а в том, что:
можно импортировать один файл стилей в разные компоненты как обычный js объект и удобно работать с ним из кода
следуя из п1: переиспользование css кода без влезания в глобальную область.
каждый класс уникален для всего приложения, на выходе получается более компактный код
нет проблем с вложенными компонентами, проще следить за деревом стилей т.к на входе и выходе одинаковый css код
Классные штуки которых не хватало. Как минимум прокидывание стиля для слотов и/или чилдренов, не делая его глобальным.
Подумал уже будто я дурак, но нет - "доступные в Vue 3.2" :D
svelte из коробки инкапсулирует стили компонентов. Впрочем, оба автора вполне себе сошлись.
Так и не смог понять какой самый красивый способ для моего варианта.
Есть компонент "Покупка" где формочки поля и т.д.
хотим в них менять только стили например
<buy theme="red"></style>
Внутри используем tailwind , и каждая формочка превращается в длиннющий ад:
<input class="{ "aaa": theme=="red", "bb": theme="green", "shadow": theme == "red" }"
и так у каждого контрола
А чем tailwind сильно отличается от inline-style внутри html? Как по мне - это дорога в ад, просто под другим названием и благими намерениями (красивым дизайном).
В свойство класс можно передать объект с полями - именами классов и булевыми значениями (добавить/не добавлять) (в том числе computed). Генерируйте объект и передавайте лишь его в класс вместо вот этой вот портянки в шаблоне. (Частное, не претендующее на звание истины мнение).
да интересный вариант , есть какойто пример?
Подобный пример приведен на странице документации. Я уже давно использую Composition API, поэтому мой пример будет выглядеть примерно вот так:
<template>
<div :class="componentClass"></div>
</template>
<script lang="ts">
// Vue 2 + Vue Composition API plugin + TypeScript
import { defineComponent, computed } from '@vue/composition-api';
interface Props {
disabled?: boolean;
highlight?: boolean;
strong?: boolean;
}
function setup(props: Props) {
const componentClass = computed(() => {
let color: string;
if (props.highlight) color = 'highlight';
else if (props.strong) color = 'strong';
else color = 'normal';
return {
disabled: Boolean(props.disabled),
[color]: true
};
});
return { componentClass };
}
export default defineComponent({
props: {
disabled: Boolean,
highlight: Boolean,
strong: Boolean
},
setup
});
</script>
<style scoped>
.normal {
color: #535353;
}
.highlight {
color: #30de30;
}
.strong {
color: #303030;
}
.disabled {
color: #939393;
user-select: none;
}
</style>
Стилизация однофайловых Vue компонентов