| 提交 | 用户 | age | ||
| 52257f | 1 | import { prefixCls } from '/@/settings/designSetting'; |
| V | 2 | |
| 3 | type Mod = string | { [key: string]: any }; | |
| 4 | type Mods = Mod | Mod[]; | |
| 5 | ||
| 6 | export type BEM = ReturnType<typeof createBEM>; | |
| 7 | ||
| 8 | function genBem(name: string, mods?: Mods): string { | |
| 9 | if (!mods) { | |
| 10 | return ''; | |
| 11 | } | |
| 12 | ||
| 13 | if (typeof mods === 'string') { | |
| 14 | return ` ${name}--${mods}`; | |
| 15 | } | |
| 16 | ||
| 17 | if (Array.isArray(mods)) { | |
| 18 | return mods.reduce<string>((ret, item) => ret + genBem(name, item), ''); | |
| 19 | } | |
| 20 | ||
| 21 | return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? genBem(name, key) : ''), ''); | |
| 22 | } | |
| 23 | ||
| 24 | /** | |
| 25 | * bem helper | |
| 26 | * b() // 'button' | |
| 27 | * b('text') // 'button__text' | |
| 28 | * b({ disabled }) // 'button button--disabled' | |
| 29 | * b('text', { disabled }) // 'button__text button__text--disabled' | |
| 30 | * b(['disabled', 'primary']) // 'button button--disabled button--primary' | |
| 31 | */ | |
| 32 | export function buildBEM(name: string) { | |
| 33 | return (el?: Mods, mods?: Mods): Mods => { | |
| 34 | if (el && typeof el !== 'string') { | |
| 35 | mods = el; | |
| 36 | el = ''; | |
| 37 | } | |
| 38 | ||
| 39 | el = el ? `${name}__${el}` : name; | |
| 40 | ||
| 41 | return `${el}${genBem(el, mods)}`; | |
| 42 | }; | |
| 43 | } | |
| 44 | ||
| 45 | export function createBEM(name: string) { | |
| 46 | return [buildBEM(`${prefixCls}-${name}`)]; | |
| 47 | } | |
| 48 | ||
| 49 | export function createNamespace(name: string) { | |
| 50 | const prefixedName = `${prefixCls}-${name}`; | |
| 51 | return [prefixedName, buildBEM(prefixedName)] as const; | |
| 52 | } | |
