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

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‘);
  },

 

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

上一篇:Boston和MIT研究人员利用脑电信号实时控制机器人


下一篇:android阿里云镜像