看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,21 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * u-grid 组件 Props 类型定义
+ * @description 宫格组件属性
+ */
+export const GridProps = {
+    ...baseProps,
+    /** 分成几列 */
+    col: { type: [Number, String] as PropType<string | number>, default: 3 },
+    /** 是否显示边框 */
+    border: { type: Boolean, default: true },
+    /** 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 */
+    align: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 宫格按压时的样式类，"none"为无效果 */
+    hoverClass: { type: String, default: 'u-hover-class' }
+};
+
+export type GridProps = ExtractPropTypes<typeof GridProps>;
@@ -0,0 +1,92 @@
+<template>
+    <view
+        class="u-grid"
+        :class="{ 'u-border-top u-border-left': border, customClass }"
+        :style="$u.toStyle(gridStyle, customStyle)"
+    >
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-grid',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { useParent, $u } from '../../';
+import { GridProps } from './types';
+import { computed } from 'vue';
+
+/**
+ * grid 宫格布局
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+ * @tutorial https://uviewpro.cn/zh/components/grid.html
+ * @property {String|Number} col 宫格的列数（默认3）
+ * @property {Boolean} border 是否显示宫格的边框（默认true）
+ * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid :col="3" @click="click"></u-grid>
+ */
+
+const props = defineProps(GridProps);
+const emit = defineEmits(['click']);
+useParent('u-grid');
+
+// 宫格对齐方式
+const gridStyle = computed(() => {
+    const style: Record<string, string> = {};
+    switch (props.align) {
+        case 'left':
+            style.justifyContent = 'flex-start';
+            break;
+        case 'center':
+            style.justifyContent = 'center';
+            break;
+        case 'right':
+            style.justifyContent = 'flex-end';
+            break;
+        default:
+            style.justifyContent = 'flex-start';
+    }
+    return style;
+});
+
+/**
+ * 点击宫格
+ * @param index 子项索引
+ */
+function click(index: number) {
+    emit('click', index);
+}
+
+defineExpose({ click, props });
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-grid {
+    width: 100%;
+	background-color: #ffffff;
+    /* #ifdef MP */
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    /* #endif */
+
+    /* #ifndef MP */
+    @include vue-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    /* #endif */
+}
+</style>