更新记录

0.0.1（2026-01-05） 下载此版本

基于公司业务抽取而来，效果就如截图一样 如有差距，自行修改

平台兼容性

uni-app(4.0)

wm-grid

<!-- 1. 使用方式 -->
<template>
    <view class="wm-main">
        <view class="wm-main-style">
            <!-- 默认使用方式 -->
            <WmGrid @click="handleGrid" :columns="5" :data="gridList"></WmGrid>
        </view>
        <view class="wm-main-style">
            <!-- 插槽使用方式 自定义样式 -->
            <WmGrid :columns="4">
                <WmGridItem
                    v-for="(item, index) in gridList"
                    :key="index"
                    :item="item"
                    :index="index"
                    @click="handleGrid(item, index)"
                >
                    <view class="custom-grid">
                        <image class="icon" :src="item.icon" mode="widthFix"></image>
                        <view class="label">{{ item.label }}</view>
                    </view>
                </WmGridItem>
            </WmGrid>
        </view>
    </view>
</template>

<script>
import Logo from '@/static/logo.png';
export default {
    name: 'Grid',
    data() {
        return {
            gridList: [
                {
                    icon: Logo,
                    label: '选项0',
                    value: 0
                },
                {
                    icon: Logo,
                    label: '选项1',
                    value: 1
                },
                {
                    icon: Logo,
                    label: '选项2',
                    value: 2
                },
                {
                    icon: Logo,
                    label: '选项3',
                    value: 3
                },
                {
                    icon: Logo,
                    label: '选项4',
                    value: 4
                },
                {
                    icon: Logo,
                    label: '选项5',
                    value: 5
                },
                {
                    icon: Logo,
                    label: '选项6',
                    value: 6
                },
                {
                    icon: Logo,
                    label: '选项7',
                    value: 7
                },
                {
                    icon: Logo,
                    label: '选项8',
                    value: 8
                },
                {
                    icon: Logo,
                    label: '选项9',
                    value: 9
                }
            ]
        };
    },
    methods: {
        handleGrid(item, index, keys) {
            console.log('grid 使用页面 ', item, index, keys);
        }
    },
};
</script>

<style scoped lang="scss">
.wm-main-style {
    width: 96%;
    margin: 100rpx auto;

    .custom-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
            width: 120rpx;
        }
        .label {
            font-size: 26rpx;
        }
    }
}
</style>

<!--2. 字段参数 -->
props: {
    // 数据源
    data: {
        type: Array,
        default: () => []
    },
    // 数据源的显示的 label
    label: {
        type: String,
        default: 'label'
    },
    // 数据源的 value 
    value: {
        type: String,
        default: 'value'
    },
    // 数据源的 icon
    icon: {
        type: String,
        default: 'icon'
    },
    // 子项的 样式
    itemStyle: {
        type: Object,
        default: () => ({})
    },
    // 数据源 字体样式
    labelStyle: {
        type: Object,
        default: () => ({})
    },
    // 数据源图标样式
    iconStyle: {
        type: Object,
        default: () => ({})
    },
    // 每行显示几个
    columns: {
        type: Number,
        default: 4
    },
    // 组件的唯一keys
    keys: {
        type: String,
        default: ''
    },
    minHeight: {
        type: [Number, String],
        default: 150
    }
},