vue计算排列布局

最新推荐文章于 2024-01-11 16:14:15 发布

天高任鸟飞dyz

最新推荐文章于 2024-01-11 16:14:15 发布

阅读量496

点赞数 9

分类专栏： Vue3 web前端 css 文章标签：前端 javascript java

本文链接：https://blog.csdn.net/yzding1225/article/details/134791327

版权

web前端同时被 3 个专栏收录

55 篇文章 4 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

1、效果

2、html

        <div class="databubble">
          <div ref="content">
            <div
              v-for="(item, index) in databubble"
              ref="contentPage"
              :key="index"
              class="contentPage"
            >
              <div>
                <span class="title">{{ item.title }}</span>
              </div>
            </div>
            <div
              v-for="item in new Array(replenish)"
              :key="item"
              style="background: none; cursor: auto"
            ></div>
          </div>
        </div>

3、js

  const databubble = ref([])
  const content = ref()
  const contentPage = ref()

  const replenish = computed(() => {
    if (content.value && contentPage.value.length) {
      let contentPageWidth = contentPage.value[0].clientWidth
      let widthPage = Math.floor(content.value.clientWidth / contentPageWidth)
      let row = Math.floor(databubble.value.length / widthPage)
      if (Number.isInteger(databubble.value.length / widthPage)) {
        return 0
      } else {
        return widthPage - (databubble.value.length - row * widthPage)
      }
    } else {
      return 0
    }
  })

4、css

  .databubble {
    margin: 16px;
    > div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      > div {
        width: 24.6%;
        height: 88px;
        background-color: #f5f7fb;
        border-radius: 4px;
        padding: 0 12px;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        line-height: 88px;
        cursor: pointer;
        .title {
          color: #202531;
          font-size: 18px;
        }
      }
    }
  }