Vue Element栅格响应式布局之隐藏组件的问题

最新推荐文章于 2025-02-14 11:40:48 发布

sylfffffffff

最新推荐文章于 2025-02-14 11:40:48 发布

阅读量8.5k

点赞数 7

文章标签： vue

本文链接：https://blog.csdn.net/sylfffffffff/article/details/105100386

版权

首先，如果想做自适应页面，可以使用Element布局这个栅格系统。
其次，当页面缩小时某些组件不宜再出现时，则需要将其隐藏，也可以通过这个栅格来实现。
这里记录下使用时发现个关于隐藏组件的问题。

   <el-col :xs="24" :sm="24" :md="0" :lg="0" :xl="0">
           <div>模块1</div>
    </el-col>
   <el-col :xs="0" :sm="0"  :md="24" :lg="24" :xl="24" >
             <div>模块2</div>
     </el-col>

1.首先，XS,SM,MD,LG,XL分别代表页面对应的尺寸（具体尺寸图可以去官网布局那看），那么可以怎么理解呢。
2.比如当页面宽度还没有超过sm这个尺寸时，显示的是模块1，当宽度达到md这个尺寸时，此时md等于0，即模块1所占栅格数为0，所以会自动隐藏。
3.同理，模块2在xs和sm的时候所占栅格数为0，即已经隐藏了，而当模块2达到md这个尺寸时，则放开隐藏，显示出来。
理解的比较粗浅，不喜欢的不要喷我 -。-
4.然后，再调试的过程中发现了一个问题，这里说一说，记录下。
5.关于模块2的隐藏问题，第2顺位的sm栅格数为0时，后面即使其他尺寸的栅格数不为0也照样.无法显示出来。将xs,sm都去掉，也一样无法显示。
通过官网可以看到这里提供了个隐藏的方法。
在这里插入图片描述
1.引入上面的文件到main.js里

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'; //引入这个文件

Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.然后将下面hidden-md-and-down这些以类名的形式写到旁边。

<el-col :md="24" :lg="24" :xl="24" class="hidden-md-and-down">
        <div>模块2</div>
 </el-col>

3.即当视口缩小到md及往下尺寸时隐藏模块2。
最后，出现这种情况时栅格数为0的尺寸不需要写出来。
个人理解，个中不足，望指出。