常见的hooks

2023-12-27 21:30:24

?1.useNamespace?

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的命名规范:

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

//使用__来连接block和element,使用–来连接block和modifier
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

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

文章来源:https://blog.csdn.net/content6/article/details/135253827
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。