其他分享
首页 > 其他分享> > Vue开发如何修改第三方组件的样式

Vue开发如何修改第三方组件的样式

作者:互联网

举个例子,修改轮播图指示器

比如项目里运用了bootstrapVue,默认的轮播图指示器样式如下图:https://bootstrap-vue.org/docs/components/carousel

 

 当需求是使用原点指示器,如下图,我们可以这样子来修改

 1 <style lang="scss" scoped>
 2 ::v-deep .carousel-indicators li {
 3     width: 10px;
 4     height: 10px;
 5     border-radius: 50%;
 6     background-color:rgba(49, 245, 215, 0.25);
 7 }
 8 ::v-deep .carousel-indicators .active {
 9     background-color:rgba(255, 255, 255, 0.65);
10 }
11 </style>
 1 <style scoped>
 2 >>> .carousel-indicators li {
 3     width: 10px;
 4     height: 10px;
 5     border-radius: 50%;
 6     background-color:rgba(49, 245, 215, 0.25);
 7 }
 8 >>> .carousel-indicators .active {
 9     background-color:rgba(255, 255, 255, 0.65);
10 }
11 </style>
 1 <style lang="sass" scoped>
 2  /deep/  .carousel-indicators li {
 3     width: 10px;
 4     height: 10px;
 5     border-radius: 50%;
 6     background-color:rgba(49, 245, 215, 0.25);
 7 }
 8  /deep/  .carousel-indicators .active {
 9     background-color:rgba(255, 255, 255, 0.65);
10 }

 

 总结:

在捕捉到的第三方样式中,一般可以使用 >>> 来深度修改样式

至于项目已经使用了sass或者scaa编译器的情况下,则可以考虑用>>>的别名 /deep/ 或 ::v-deep操作符取而代之

 

标签:Vue,background,样式,deep,color,carousel,组件,rgba,255
来源: https://www.cnblogs.com/qpnets/p/14292147.html