Как элегантно использовать BEM в vue3

При командной разработке нам необходимо формулировать соглашения об именовании 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

Оцените статью
Procodings.ru
Добавить комментарий