布局-九宫格 ​

<template>
  <view class="rsgrid">
    <view class="jp-bg-gap title">九宫格：支持列数自定义，支持占位图</view>
    <jp-grid
      :pictures="attribute.dataArr"
      :column="4"
      error-img="/static/example/ic_template.png"
    ></jp-grid>
  </view>
</template>

<script lang="ts" setup>
  import { reactive } from "vue"

  const attribute = reactive({
    dataArr: [
      {
        img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3279463813,881319902&fm=26&gp=0.jpg",
        name: "测试1",
      },
      {
        img: "http://img2.imgtn.bdimg.com/it/u=3035889490,728308378&fm=15&gp=0.jpg",
        name: "测试2",
      },
      {
        img: "http://img2.imgtn.bdimg.com/it/u=3035889490,728308378&fm=15&gp=0.jpg",
        name: "测试3",
      },
      {
        img: "http://img2.imgtn.bdimg.com/it/u=3035889490,728308378&fm=15&gp=0.jpg",
        name: "测试4",
      },
      {
        img: "http://img2.imgtn.bdimg.com/it/u=3035889490,728308378&fm=15&gp=0.jpg",
        name: "测试5",
      },
      {
        img: "http://img2.imgtn.bdimg.com/it/u=3035889490,728308378&fm=15&gp=0.jpg",
        name: "测试6",
      },
      {
        img: "http://img2.imgtn.bdimg.com/it/u=3035889490,728308378&fm=15&gp=0.jpg",
        name: "测试7",
      },
      { img: "http://img2.imgtn.bdimg.com/it/u=303588949", name: "测试8" },
    ],
  })
</script>

<style scoped lang="scss">
  .rsgrid {
    padding: 12px;
    .title {
      margin-top: 12px;
      padding: 12px;
      font-size: 14px;
      color: #666;
    }
  }
</style>