vue2环境下vue-carousel点击分页器无法去除focus外轮廓怎么解决

解决方案 #

1. 修复scoped样式穿透问题
   绝大多数场景下样式不生效是因为你的业务组件<style>标签加了scoped属性，默认无法作用于第三方组件内部的DOM元素，需要使用深度选择器穿透作用域：
   如果你的项目使用less/sass等预处理器，写法如下：

/* 写在业务组件带scoped的style标签内 */
/deep/ .VueCarousel-dot,
/deep/ .VueCarousel-dot:focus {
  outline: none !important;
}

如果使用原生CSS，写法如下：

::v-deep .VueCarousel-dot,
::v-deep .VueCarousel-dot:focus {
  outline: none !important;
}

2. 排查样式优先级冲突
   如果上述写法仍不生效，打开浏览器控制台的元素检查面板，选中分页器dot元素，查看outline属性的来源规则：

• 若存在更高优先级的规则（比如带有!important的全局样式），可以给你的选择器增加父级类名提高权重，例如轮播外层自定义类名为my-carousel，写法调整为：

/deep/ .my-carousel .VueCarousel-dot:focus {
  outline: none !important;
}

• 若发现outline是dot元素内部的button/a子元素产生的，调整选择器命中对应子元素即可：

/deep/ .VueCarousel-dot button:focus {
  outline: none !important;
}

之前修改不生效的原因 #

• 直接修改node_modules内的vue-carousel源码无效：你修改的是src目录下的未编译源码，项目实际引入的是组件库编译后的dist目录文件，改动不会生效；且修改node_modules的操作会在重新安装依赖后被覆盖，不推荐使用。
• 业务组件内直接写类名无效：scoped样式默认只会作用于当前组件的原生DOM，不会渗透到子组件内部。

内容的提问来源于stack exchange，提问作者Tina Hung