昨天犯了一个很低级的错误,差点影响到上线。警醒一下自己,太大意了,记录一下
众所周知,在vue2里面,如果不加scoped ,那么就会有可能影响到其他页面的样式。
而有一些样式又必须是在全局修改才能生效,就如elelment 的 select 下拉框。因为如果正常使用的话下拉框的样式是在页面外的,所以在本页面无法选中这个样式进行修改。
为解决这个问题,然后去看了element的官方文档。看到里面有这么一个属性
通过这个属性,我们可以将本来在外面的select选择框插入到本页面的body里面,这样我们就可以在scoped 里面对select进行修改了,并且不影响其他页面。非常奈斯。
以下是我的部分代码
// select 选择器
<el-select v-model="areaValue" placeholder="切换行政区域" :popper-append-to-body="false" @change="selectArea">
<el-option
v-for="item in arr"
:key="item.id"
:label="item.areaName"
:value="item.areaName">
</el-option>
</el-select>
//css
<style scoped lang="scss">
.left-box {
::v-deep {
.el-select-dropdown {
border-color: #6ED9FF;
background-color: #051224;
}
.el-select .el-input.is-focus .el-input__inner {
border-color: #6ED9FF !important;
}
.el-select-dropdown__item {
color: #fff;
border: 1px solid transparent;
}
.el-select-dropdown__item.hover {
border: 1px solid #6ED9FF;
background-color: transparent;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
top: 0;
border-bottom-color: #6ed9ff;
}
.el-input__inner {
color: #fff;
}
}
}
</style>