VUE循环 + CSS 实现布局

最新推荐文章于 2024-10-29 10:06:15 发布

momo_mom177

最新推荐文章于 2024-10-29 10:06:15 发布

阅读量866

点赞数 1

文章标签： vue.js vue 前端 css3

本文链接：https://blog.csdn.net/momo_mom177/article/details/124011112

版权

实现样式图：

<div class="tool-figure-note-box">
    <div v-for="(figureNoteItem, figureNoteIndex) in list" :key="figureNoteIndex">
      <template v-if="figureNoteItem.show">
        <div class="figure-note-title">{{ figureNoteItem.title }}</div>
         <div class="figure-note-list">
           <div v-for="(item, index) in figureNoteItem.list" :key="index">
             <el-image style="width: 20px" :src="item.src" />
             <span class="margin-left-8">{{ item.text }}</span>
           </div>
         </div>
       </template>
     </div>
</div>

list: [
        {
          show: true,
          title: '列表1：',
          list: [
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题1'
            },
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题2'
            },
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题3'
            },
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题4'
            },
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题5'
            }
          ]
        },
        {
          show: true,
          title: '列表2：',
          list: [
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题1'
            },
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题2'
            },
            {
              src: require('@/assets/img/ic_map_region_3.svg'),
              text: '标题3'
            }
          ]
        }
      ]

css主要是处理不同项之间的边距问题，因为，需要加margin或者padding，但是使用v-if不会去掉margin/padding，所以使用列表里面的title的加上padding来将两个列表之间撑开，列表中间有一条分割线，刚好可以用title的上border来做

使用:first-of-type来实现，详情见我之前写的CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法_momo_mom177的博客-CSDN博客官方链接：CSS3 :first-of-type 选择器 <div class="parent"> <span class="child child1">child1</span> <span class="child child2">child2</span> <div class="child child3"> child3 <div>child3-1</div>https://blog.csdn.net/momo_mom177/article/details/124008659?spm=1001.2014.3001.5502

.tool-figure-note-box {
    width: 350px;
    margin-top: 30px;
    padding: 20px 30px;
    border: 1px solid rgba(223,228,235,1);
    border-radius: 8px;
    > div {
    &:first-of-type  .figure-note-title{
       padding-top: 0;
       border-top: none; // 第一个去掉分割线
       margin-top: 0;
     }
    .figure-note-title {
      font-size: 16px;
      color: #2A2F4D;
      font-weight: 500;
      padding-top: 15px;
      border-top: 1px solid rgba(223,228,235,1); // 分割线
      margin-top: 12px;
    }
      .figure-note-list {
        display: flex;
        flex-wrap: wrap;
        > div {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #8392B7;
          margin-top: 12px;
          margin-right: 25px;
        }
      }
    }
  }