标签：Vue background 样式 deep color carousel 组件 rgba 255

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

比如项目里运用了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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。