分类：scoped

2020
10-28

解决vue scoped html样式无效的问题

1、问题场景page1,page2都使用flexible移动端自适应的时候，有一个页面page2需要手动设置rem基准值，//手动设置基准html{font-size:120px!important;}但是在page2引用的self.less里面设置了基准，竟然没有生效2、问题分析scoped属性在引用self.less的时候，使用了属性scopedvue中引入了scoped这个概念，设计思想就是让当前组件的样式不会修改到其他页面的样式，使用了data-v-hash的方式来使css有了他对应的模块的标识，通俗来... 继续阅读 >

2020
10-10

详解vue 中 scoped 样式作用域的规则

哈喽！大家好！我是木瓜太香，今天我们来聊一个vue的样式作用域的问题，通常我们开发项目的时候是要在style上加上scoped来起到规定组件作用域的效果的，所以了解他们的规则也是很有必要的，可以让你更清晰的了解你的项目样式是怎么运作的。先来说说实现方式vue中的样式作用域是通过属性选择器来实现的，例如同样一个类名，我们是通过.类名[属性名]来做区分的，我们这里主要是要搞清楚这里的属性名是怎么分配的。样式作用域... 继续阅读 >

2020
10-10

解决vue加scoped后就无法修改vant的UI组件的样式问题

有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。解决方法：使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件<stylescoped>.a>>>.b{/*...*/}</style>以上的代码会编译成：.a[data-v-f3f3eg9].b{/*...*/}注意：如果你使用了Less或Sass等预处理器，可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合-... 继续阅读 >

2020
10-10

解决vue scoped scss 无效的问题

今天遇到scoped内部的scss设置无效，解决办法如下：/deep/<stylescopedlang="scss">.position-el-steps{/deep/.el-step.is-vertical{.el-step__description{margin-top:-20px;}.el-step__line{border-left:2pxdashed#c0c4cc;background-color:transparent;visibility:visible!important;}}}补充知识：【vuescoped样式修改】框架或插件组件样式更改及/deep/警告前言在做vue项目的时候，很多人应该... 继续阅读 >

2020
10-10

基于vue中的scoped坑点解说

今天在覆盖iview组件样式的时候发现一个问题，就是无法覆盖组件原有的样式，最后在github的issue中找到了答案：不要使用scoped属性。于是我查找了下关于scoped的文章。我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。代码如下：//valChange.less(使用了嵌套规则)#valueSlide{.bigSl... 继续阅读 >

2020
10-08

Vue scoped及deep使用方法解析

众所周知，在组件中给style标签添加属性scoped属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。原理如下-------在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件，子组件同时使... 继续阅读 >