分享一个_scopeId的使用场景
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
给大家分享一个 scopeId 的应用场景哈
说实话之前我也没用过
那它是什么呢
其实就是vue用来隔离不同组件样式
那个唯一标识
那它有什么用呢
这是一个下拉框
我们现在啊
想动态设置里面的背景颜色
这个颜色值是动态的
所以呢不能用popper-class
只能像我们前两天那期视频一样
用动态的CSS变量
那么我们都知道
这个popper
曾默认他是被挂在到这个body里面
而且呢他没有这个唯一标识
所以解决这个问题呢
要么我们把它改成popper-append-to-body（改成false）
那要么呢用我们今天这种方法
就是用scopeId来解决
怎么解决呢
就是我们手动给它加这么一个唯一标识
首先呢我们通过这种方法
找到这个组件里边这个popper元素
找到这个元素之后呢
我们用setAttribute
把这个scopeId作为属性的名称
然后属性只是一个空的字符串就可以了
我们来试一下
看一下
大家看他就有这个标识了
他样式呢也就自然而然应用上了
那有同学说既然你找到了这个元素
直接给他设置样式颜色不就行了
我们来看一下这样会有什么问题啊
点style点backgroundColor
红色
大家看 这还有一个小三角
这个小三角啊
它是一个伪样式
大家看
我们用纯JS的话
很难动态去改变它背景颜色（口误：边框颜色）
所以啊我们可以使用这个
CSS变量的这种方式 大家看
用这种方式是可以指定的
我们再来试一下
然后 我们改个颜色
大家看！这就可以了