常见的hooks - 技术栈

1.useNamespace

javascript 复制代码

import { useNamespace } from '@element-plus/hooks'

useNamespace函数 是返回了符合BEM命名规则的方法。

BEM:

BEM是一种针对css的前端命名规范，是块(Block)，元素（Element），修饰符（Modifier）的简写。

Block是模块，比如：article、dialog、sidebar、form、tab

Element为块里的元素，比如form里面的input、submit

modifier是对block或element的修饰，比如form--theme-dark

BEM的命名规范：

javascript 复制代码

.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { } 

//使用__来连接block和element，使用--来连接block和modifier

javascript 复制代码

import { useNamespace } from './compo/useNamespace'
const bs = useNamespace('dialog')
ns.b() // el-dialog
ns.b('overlay') // el-dialog-overlay
ns.e('header') // el-dialog__header
ns.m('theme-dark') // el-dialog--theme-dark
ns.be('header','close') // el-dialog-header__close
ns.em('footer','small') // el-dialog__footer--small
ns.bm('footer','small') // el-dialog-footer--small
ns.bem('footer','btn','primary') // el-dialog-footer__btn--primary
ns.is('closeable') // is-closeable 



ns.b() 返回结果为 "el-dialog "
ms.b('overlay')
ns.e('header') 返回结果为 "el-dialog__header"
ns.m('theme-dark') 返回结果为 "el-dialog--theme-dark"
ns.be('header','close') 返回结果为 "el-dialog-header__close" 意思为返回一个block + element
ns.em('foter,'small') 返回结果为 "el-dialog__footer--small" 意思为返回一个element + modifier
ns.bm('footer','small') 返回结果为 "el-dialog-footer--small" 意思为返回一个block + modifier
ns.bem('footer','btn','primary') 返回结果为" el-dialog-footer__btn--primary" 意思为返回一个block+element+modifer
ns.is('closeable') 返回is-closeable 通常用来描述组件的状态，如is-closeable 表示：是否显示关闭

2. useElementBounding

提供了以下功能：

边界信息获取，如果左边距left、宽度width等
响应式更新，返回的边界信息是响应式的，目标元素的位置和尺寸变化时，会自动更新
额为状态控制，还提供了一些额外的状态，例如目标元素是否可见，是否在屏幕内等

3.useWindowSize

可以获取窗口的宽度和高度，并且当窗口大小变化时自动更新

4.useEventListener

添加点击、键盘、滚动等监听事件