b_

bem 命名工具

安装

npm install b_

使用

Vue2

bem.js

import bem from 'b_';

export default {
	install(Vue) {
		Vue.prototype.$bem = function (blockName) {
			const b = bem(blockName);
			return (element, mods) => b(element, mods);
		};
	},
};

main.js

import Vue from 'vue';
import App from './App.vue';
import BemPlugin from '@/utils/useBem.js';

Vue.use(BemPlugin);

new Vue({
	render: (h) => h(App),
}).$mount('#app');

vue中使用

<template>
	<div :class="b()">
		<div :class="b('header')">标题</div>
		<div :class="b('body', { active: isActive })">内容</div>
	</div>
</template>

<script>
export default {
	name: 'Card',
	data() {
		return {
			isActive: true,
		};
	},
	created() {
		// 在 created 或 beforeCreate 阶段生成 block 专属函数
		this.b = this.$bem('card');
	},
};
</script>

渲染结果

<div class="card">
	<div class="card__header">标题</div>
	<div class="card__body card__body--active">内容</div>
</div>

Vue3

useBem.js

import bem from '@/utils/useBem.js';

export default function useBem(blockName) {
	const b = bem(blockName);
	return (element, mods) => b(element, mods);
}

使用

<template>
	<div :class="b()">
		<div :class="b('header')">标题</div>
		<div :class="b('body', { active: isActive })">内容</div>
	</div>
</template>

<script setup>
import useBem from '@/utils/useBem.js';

const b = useBem('card');
const isActive = true;
</script>