vue 中使用scoped关键字后样式不能修改第三方组件问题

关于这个scoped的用法，就是只加载以及影响当前的组件，通过这个属性，可以使得组件之间的样式不互相污染但是往往有时候，我们在使用一些第三方插件的同时，又需要对第三方插件做一些细微的修改，那么我们就可以使用下面的方法使用 >>>可以在已经写了scoped的style下控制样式<style lang="stylus" sco

Mr_HeXS

5508人浏览 · 2018-05-19 16:20:21

Mr_HeXS · 2018-05-19 16:20:21 发布

关于这个scoped的用法，就是只加载以及影响当前的组件，通过这个属性，可以使得组件之间的样式不互相污染

但是往往有时候，我们在使用一些第三方插件的同时，又需要对第三方插件做一些细微的修改，那么我们就可以使用下面的方法

使用 >>>可以在已经写了scoped的style下控制样式

// 样式穿透，不受scoped限制

.wrapper >>> .swiper-pagination-bullet-active

background #fff !important

// 解决图片刷新不出来，页面变动的方法，使用图片的宽高比，高/宽

.wrapper

width 100%

height 0;

overflow hidden

padding-bottom:29%

background #eee

.swiper-img

width 100%;

还有一种就是曲线救国的方式实现

就是写两个style，一个是用于全局修改组件用，一个用于当前的组件用

<style>

/* global styles */

</style>

/* local styles */

</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^