简介
有个需求要在vue里面给body动态的加样式
做法
onMounted(() => {
watchEffect(() => {
if (visible.value) {
document.body.classList.remove('ui-drawer-pop')
}
document.body.classList.remove('ui-drawer-pop')
})
})
这样根本没有用
onMounted(() => {
document.body.classList.remove('ui-drawer-pop')
})
这种可以加上class但是这样加会在组件挂载之前就加上了,这对我来说还不如直接在index.html里面提前写好,显然不能满足需求
//help.ts
const body = document.body
// 这个函数使用来给body加样式的
// 由于vue组件内不能有条件的在body上面加样式,所以单独抽离一个函数来加样式
export const addClass = (shouldAddClass: boolean) => {
const body_classname = body.className
if (shouldAddClass) {
body.classList.add('draw_pop')
} else {
body_classname !== 'draw_pop'
? body.classList.remove('draw_pop')
: body.removeAttribute('class')
}
}
单独创建一个文件给来加class这样是可以的
而且class名字不能有-
中划线这个符号不然也加不上