iview组件篇之布局

最新推荐文章于 2024-03-19 09:39:07 发布

原创最新推荐文章于 2024-03-19 09:39:07 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文介绍了iview框架中的24栅格布局系统，详细讲解了如何利用Row和Col创建均匀分布的列，并展示了如何实现滚动悬停效果。同时，文章还探讨了垂直居中在modal模态框中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.iview中24栅格布局介绍

1.1 iview24列栅格布局介绍

引入概念：
Row代表一行
Col代表一列
Card代表着卡片

<template>
  <div>
    <Row>
      <Col v-for='n in 24' span="1" :key='n'>
        <Card :title=n>
            {{ n }}列
        </Card>
      </Col>
    </Row>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data(){ 
    return {
      activeName: this.$route.path
    }
    
  },
  methods:{
  },
  watch: {
    '$route' () {
      this.activeName=this.$route.path;
      console.log(this.activeName);
    }
  }
}
</script>

<style scoped>
  body {
    background-color: #c0c0c0 !important;
  }
</style>

效果如下：
在这里插入图片描述
我们可以看到一行被平均分成了24列，这就是iview基本的24栅格布局，其中span代表着每一个列占据的24栅格的栅格数量

1.2 滚动悬停

IView中可以使用<Affix></Affix>来控制页面滚动时的悬停

<template>
  <div class="primary">
    <Row :gutter="32">
      <Col span="8">
        <Card>
            <div style="height:600px">
              一
            </div>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <div style="height: 100px">
            上
          </div>
        </Card>
        <Affix>
          <Card>
            <div style="height:200px">
              二
            </div>
          </Card>
        </Affix> 
      </Col>
    </Row>
  </div>
</template>
 
<script>
export default {
  name: 'app',
}
</script>

<style>
  body {
    height: 5000px;
    background: #f8f8f9 !important;
  }
</style>

实现效果，我们可以看到上卡片中内容滚动完，二卡片才开始悬停
在这里插入图片描述
有时候我们布局希望滚动悬停的地方不能和导航栏覆盖，我们希望滚动悬停的位置刚好到导航栏底部

<template>
  <div class="primary">
    <div style="width:100%;height:50px;position:fixed;background-color:red;z-index:10;"></div>
    <Row :gutter="32">
      <Col span="8">
        <Card>
            <div style="height:600px">
              一
            </div>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <div style="height:200px;"></div>
        </Card>
        <Affix :offset-top="50">
          <Card>
            <div style="height:200px">
              二
            </div>
          </Card>
        </Affix> 
      </Col>
    </Row>
  </div>
</template>
 
<script>
export default {
  name: 'app',
}
</script>

<style>
  body {
    height: 5000px;
    background: #f8f8f9 !important;
  }
</style>