更新记录

1.0.0（2024-05-30） 下载此版本

无

平台兼容性

zf-grid-box

如果该插件对您有帮助，麻烦收藏评价鼓励一下作者

props参数说明

使用示例

<template>
    <view style="padding:20rpx">
        <view style="margin-bottom: 20rpx;">
            <text style="margin-bottom: 20rpx;display: block;">不带边框的网格</text>
            <zf-grid-box :isBorder="false" :isShowNum="true" :list="list1">
                <template #content="{item}">
                    <view class="item" @click="getItem(item)">
                        {{item.title}}
                    </view>
                </template>
            </zf-grid-box>
        </view>
        <view style="margin-bottom: 20rpx;">
            <text style="margin-bottom: 20rpx;display: block;">带边框的网格</text>
            <zf-grid-box :list="list1">
                <template #content="{item}">
                    <view class="item" @click="getItem(item)">
                        {{item.title}}
                    </view>
                </template>
            </zf-grid-box>
        </view>
        <view style="margin-bottom: 20rpx;">
            <text style="margin-bottom: 20rpx;display: block;">自定义边框颜色大小的网格</text>
            <zf-grid-box :list="list1" :borderColor="'red'" :borderSize="2">
                <template #content="{item}">
                    <view class="item" @click="getItem(item)">
                        {{item.title}}
                    </view>
                </template>
            </zf-grid-box>
        </view>
        <view style="margin-bottom: 20rpx;">
            <text style="margin-bottom: 20rpx;display: block;">带角标的网格</text>
            <zf-grid-box :list="list1" :isShowNum="true">
                <template #content="{item}">
                    <view class="item" @click="getItem(item)">
                        {{item.title}}
                    </view>
                </template>
            </zf-grid-box>
        </view>
        <view style="margin-bottom: 20rpx;">
            <text style="margin-bottom: 20rpx;display: block;">自定义列数的网格</text>
            <zf-grid-box :list="list2" :isShowNum="true" :gridRow="4" :borderColor="'red'" :borderSize="2">
                <template #content="{item}">
                    <view class="item"  @click="getItem(item)">
                        {{item.title}}
                    </view>
                </template>
            </zf-grid-box>
        </view>
    </view>
</template>

<script setup>
    import {ref} from 'vue'
    const list1 = ref([
        {id:1,title:'1',icon:'@/images/loading.gif',num:13},
        {id:2,title:'2',icon:'@/images/loading.gif',num:13},
        {id:3,title:'3',icon:'@/images/loading.gif',num:13},
        {id:4,title:'4',icon:'@/images/loading.gif',num:13},
        {id:5,title:'5',icon:'@/images/loading.gif',num:13},
        {id:6,title:'6',icon:'@/images/loading.gif',num:13},
    ])
    const list2 = ref([
        {id:1,title:'1',icon:'@/images/loading.gif',num:13},
        {id:2,title:'2',icon:'@/images/loading.gif',num:13},
        {id:3,title:'3',icon:'@/images/loading.gif',num:13},
        {id:4,title:'4',icon:'@/images/loading.gif',num:13},
        {id:5,title:'5',icon:'@/images/loading.gif',num:13},
        {id:6,title:'6',icon:'@/images/loading.gif',num:13},
        {id:7,title:'7',icon:'@/images/loading.gif',num:130},
        {id:8,title:'8',icon:'@/images/loading.gif',num:0},
    ])
    // 宫格点击
    const getItem=(e)=>{
        console.log(e)
    }
</script>

<style lang="less" scoped>
    .item{
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center; 
    }
</style>