При командной разработке нам необходимо формулировать соглашения об именовании css, и спецификация BEM является одним из соглашений об именовании css. Наш проект был разработан с помощью vue3, и я не нашел в интернете фреймворк BEM, который мне нужен, поэтому я написал его сам, а затем представлю вам vue3-bem.
Установка
npm i vue3-bem
Использование
vue3-bem также очень прост в использовании. Как показано ниже.
// .vue
import useBem from "vue3-bem";
const bem = useBem("block");
<div :class="bem('elem', 'selected')"></div>
.block {
&__elem {
&--selected {
}
}
}
Api
Используйте useBem для установки блока.
Используйте bem для настройки элементов и модфиров для возврата классов.
type BemFunction = function (
e?: string | null,
m?: string | string[] | { [key in string]: boolean }
) => string[];
function useBem(block: string) => BemFunction;
bem: BemFunction
Инструменты
Если вы считаете, что писать импорт для каждого компонента слишком хлопотно, вы можете использовать плагин vite-plugin-vue3-bem, чтобы не писать import vue3-bem.
Использование vite-plugin-vue3-bem поможет вам убрать импорт.
// .vue
<template>
<div :class="bem('elem', 'selected')"></div>
</template>
<script lang="ts" bem-block="tip">
// do some thing
</script>
<style lang="less">
.tip {
&__elem {
&--selected {
}
}
}
</style>
// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";
plugins:[
ViteVue3Bem()
]
Объявление типов
Объявление типов требуется в typescript для предотвращения сообщений об ошибках.
// env.d.ts
import "vue3-bem";
Пример
Имя пользовательского блока
<div class="tip">
<div :class="bem("wrap")"></div>
</div>
<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
.tip {
&__wrap {
}
}
Встроенные модфиеры
<div :class="bem('container')">
<div :class="bem("header")"></div>
<div :class="bem('item', ["selected", "highlighted"])"></div>
</div>
<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
.tip {
&__header {
}
&__item {
&--selected {
}
&--highlighted {
}
}
}
Условные модификаторы
<div :class="bem('container')">
<div :class="bem("header")"></div>
<div :class="bem('item', {"selected": true, "highlighted": highlighted})"></div>
</div>
<script>
import useBem from "./useBem";
const bem = useBem('tip');
const highlighted = ref(false);
</script>
.tip {
&__header {
}
&__item {
&--selected {
}
&--highlighted {
}
}
}
Поставьте звезду, если вы думаете, что это поможет вам.
github: vue3-bem