vue less scope的样式中添加全局样式，或者针对本页面的 html body等app外层元素添加样式的一些方法

Posted 2021-03-06 前端小小菜

1、vue less scope的样式中添加全局样式。

使用场景：

例如 

<div class="bd" v-html="htmlStr"></div>

其中， htmlStr = ‘<span class="title">标题</span>‘

 

如果我们使用 scoped样式， .bd .title{} 则无法生效。

可以使用深指向。例如

.bd >>> .title{}

则可以对起作用。 因为less loader等loaders 会自动忽略 >>>

注意，部分loader对 >>> 不能解析， 可以更换为  /deep/

.bd /deep/ .title{}

两种方法是等价的。

2、在页面中单独设置body或者html等app外层的元素属性。

首先，我们想到的当然是页面内新增一个 不带scoped的style标签。 不过这样写了之后，发现其他页面也收到污染。 因此，考虑通过在created声明周期中进行添加，然后再beforeDestroyed周期中移除一个class的方式。

例如：

created() {
    document.body.classList.add(‘body-home‘);
  },
  beforeDestroy() {
    document.body.classList.remove(‘body-home‘);
  },