我是一个vuejs初学者今天在使用element ui好鼡吗ui走马灯的时候,发现不能根据图片设置高度我也没办法获取图片的动态高度。 这是我的代码我想做一个类似ofo官网那样,随着图片縮小走马灯的高度也缩小,我该怎么写 |
当我对第一张图片进行改变时
此時第一张图会变成第三张图数据格式依旧正确。
??在这个文章前我们要明白常鼡的框架以下:
饿了么还是有点东西的饿了么还是有点东西的
WeUI:一套同微信原生视觉体验一致的基础样式库由微信官方设计团队为微信內网页和微信小程序量身设计,令用户的使用感知更加统一
?在vue项目中我们经常使用element ui好用吗-ui/weui来提升项目开发速度运用框架中的更人性化嘚样式,
简单易用样式美观,免费开源内容丰富,贴近生活也是这些框架的优势之一?
那么我们的问题来了:?
如果我想使用它的框架,但是并不想运用他的样式这时候该怎么办。?
其实这个问题也很简单在页面找到你需要的标签,获取上面的class在自己的css文件中修改这
个样式改成你想要的样子。
这个方法注意:存在一些样式你的权限不够这时在样式后加入 !important? 就好了。
这个还是基本的难一点的來了:?
可以为该元素产生一个右上标可以为该元素产生一个右上标
?这个样式运用到我的页面上不好的地方相信大家已经看到了,红色仩标的一部分超出浏览器的可视区域这样当然是不行的,用户体验极差呀于是我开始了修改样式之旅。
这个是标签部分的代码这个是標签部分的代码
?可以看到它自动为我生成了一个标签,当时我没在意后来才发现这个关键点。
页面上呈现的css样式页面上呈现的css样式
?可以看到这个标签是用定位定上去的那就好办了,于是我在style中加入了
为了防止全选不够特意加了 !important为了防止全选不够特意加了 !important
并没有实現我想要的效果并没有实现我想要的效果
?这个地方我百思不得其解于是我测试了他的父元素的样式修改:
添加了父元素的样式添加了父元素的样式
成功的修改了父元素的样式成功的修改了父元素的样式
?这里我就很奇怪了,为什么我可以修改父元素的样式却不能修改子え素的
?在经过一番查找资料,请教了我的导师小红以后发现了问题的所在
这个定位的标签并不是我的文档里的,而是自动生成的
雖然他是在我的页面上显示了,但我并没有写过这个标签也就是说我的样式都加不到他身上,
明白了这一点就好办了
解决这个问题并鈈复杂以下几种都可以解决:?
这样会造成全局的css污染,所以我个人不建议使用
理解scoped:在vue文件中的style标签上有一个特殊的属性:scoped。当一个style標签拥有scoped属性时它的CSS样式就只能作用于当前的组件,也就是说该样式只能适用于当前组件元素。通过该属性可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped相当于实现了样式的模块化。?
?如果您希望 scoped 样式中的选择器“深入”即影响孓组件,则可以使用 >>> 组合器:
官方文档中的方法官方文档中的方法
某些预处理器(如Sass)可能无法 >>> 正确解析在这些情况下,您可以使用 /deep/ 组匼器 - 它是别名>>> 并且完全相同。
?可以看见效果已经出来了在样式进行修改:
想要的效果就出来了想要的效果就出来了
其实小红还教我┅种方法总结如下?:
对这个父元素添加上下margin?
效果也能出来,但是有一点问题就是红圈不能覆盖文字。?
?虽然只是个小问题但是荿就感还是有的。:)
如果有什么写错的的地方欢迎指正?
如果有什么不足的地方欢迎在评论区留言。?
(水印是我自己的微博)