body加class

简介

有个需求要在vue里面给body动态的加样式

做法

onMounted(() => {
  watchEffect(() => {
    if (visible.value) {
      document.body.classList.remove('ui-drawer-pop')
    }
    document.body.classList.remove('ui-drawer-pop')
  })
})
1
2
3
4
5
6
7
8

这样根本没有用

onMounted(() => {
  document.body.classList.remove('ui-drawer-pop')
})
1
2
3

这种可以加上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')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

单独创建一个文件给来加class这样是可以的

而且class名字不能有-中划线这个符号不然也加不上