这里以此代码片段为例说明一则bug,请bug对号入座。(bug截图省略)
页面的栅格缩放,导致页面布局发生叠加错位?
一、坑1 · 引言:
(先来一则bug代码)
<el-card v-for="(resume,key) in resumes" :key="key" class="item" shadow="hover">
<el-row>
<el-col :span="4">
<div class="box1">
<div class="pic" v-if=" resume.sex === 'M'">
<img src="../../../static/images/default-gg.png" class="thumb-hd">
</div>
<div class="pic" v-else-if="1===1">
<img src="../../../static/images/default-mm.png" class="thumb-hd">
</div>
<p class="clr-1a">{{resume.resumeName}}</p>
</div>
</el-col>
<el-col :span="8">
<div class="box2">
<p class="clr-1a">{{resume.jobIntention}} {{resume.salaryExp}}K {{resume.jobWantedState}}</p>
<p class="clr-666">{{resume.seniority}}年 {{resume.location}} </p>
<p class="clr-b2">{{resume.education}} {{resume.birthday}}岁 {{(new Date(resume.updateDate)).getMonth()+1}}月{{(new Date(resume.updateDate)).getDate()}}日 {{(new Date(resume.updateDate)).getHours()}}时</p>
</div>
</el-col>
<el-col :span="10">
<div class="box3">
<!-- 注释1: 注意查看下面的特殊字符 &npsp; -->
<p class="clr-1a"> <span class="pull-r">{{resume.phone}}</span> </p>
<p class="clr-555">{{resume.remarks}}</p>
</div>
</el-col>
<el-col :span="2" class="pos-rel">
<div class="button pos-abl">
<div class="btn1"> <el-button type="primary" size="" plain @click="open3">举报</el-button></div>
<!-- <div class="btn2"> <el-button type="primary" size="" plain @click="open2">收藏</el-button></div> -->
</div>
</el-col>
</el-row>
</el-card>
注意上面的代码:
【注释1】
部分的&npsp;
,因为有该特殊字符,所以页面style样化在自动缩放的时候局部出现了紊乱的布局bug。
解决办法:
- 只需要将它删除就没有了。
二、坑2 · (再来第二则bug)
问题描述:
- 单页面
.vue
文件的<style>
样式:如果它没有设置 <style scoped>
(scoped 约束仅对当前页面样式有效),那么在你访问了同样class定义规则的相关页面
之后返回,也会有可能造成目标页这样的bug !
解决办法:
- 出现这样的异常bug,就需要你自己研究一下css的优先级,自己去解决了。
这个没有什么经验,不再赘述,请留意。
三、坑3 · 最坑(再来第三则bug:一般不会出现这个问题!
)
问题描述:
- vuejs的编译打包是不是会把一些css类重新定义封装???
( 傻坑?!)
解决办法:
如果真是这样的bug,真需要研究一下css的编译方式,
这里罗列几点需要注意的技巧和编写代码的规范。
-
技巧1:
规范代码,采用vuejs分页面模块打包,这样每个页面的scoped单独加载,相同样式.class
类名可以在另外的一个页面通过二次绑定.class2
类名,来进行区分,懒加载渲染。- 若局限于使用这种策略,可以参考vuejs专栏相关文章(vuejs分模块加载/vuejs页面懒加载技术)。
-
技巧2:
如果引入的是.vue文件命名后封装的组件(比如我自己的indexMenu.vue导航组件,暂称为‘子文件’),可以在引入文件(暂称为:父文件
;如index.vue)内分别定义<style></style>
和<style scoped></scoped>
;这样可以将“子文件”内的需要变换的样式定义在<style>
中,有必要的话,可以使用技巧1进行辅助绑定样式。 -
技巧3:
实在修改不定或者搞不了的,就不要使用上述两种技巧了,可以把带码拉出来一起写(不要分多个文件,或者使用相同的class类名),定义新的classl类,在<style>
中进行改动。 -
技巧4:
使用原生js、jQuery操作dom元素,达到速成效果(注意此处的if和else闭环逻辑,以便于满足来回切换样式的需求,【具体代码示例:省略】)。
如后期有更多经验,会继续补充,请留言提议。
- 如果你也有类似问题或处理经验,
欢迎留言分享与交流
。
以上就是关于“ element-UI栅格系统缩放,导致页面布局效果bug? 叠加?错位? ” 的全部内容。