某些情况下，希望生成样式文件并生效，可以使用最简单的方法，插入 <style> 节点来实现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
export default {
mounted() {
const css = `.test {
background-color: white;
}`
this.style = document.createElement('style');
this.style.appendChild(document.createTextNode(css));
document.head.appendChild(this.style);
},
destroyed() {
// 销毁样式节点
this.style && this.style.remove()
}
}
</script>
生成后
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<!-- ... -->
<style>
.test {
background-color: white;
}
</style>
</head>
<body>
<!-- ... -->
</body>
</html>
scoped
如果担心部分样式会冲突可以利用 _uid 实现DOM ID，让其局部生效
uid是 vue2 的组件ID， 具有全局唯一性，用来设置为ID再合适不过了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<!-- 增加唯一标志 -->
<div :id="`c-${_uid}`">
<!-- ... -->
</div>
</template>
<script>
export default {
mounted() {
// 只对当前组件生效
const css = `#c-${this._uid} .test {
background-color: white;
}`
this.style = document.createElement('style');
this.style.appendChild(document.createTextNode(css));
document.head.appendChild(this.style);
},
destroyed() {
// 销毁样式节点
this.style && this.style.remove()
}
}
</script>
