From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-grid-item/u-grid-item.vue |  126 ++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 126 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-grid-item/u-grid-item.vue b/uview-ui/components/u-grid-item/u-grid-item.vue
new file mode 100644
index 0000000..0773307
--- /dev/null
+++ b/uview-ui/components/u-grid-item/u-grid-item.vue
@@ -0,0 +1,126 @@
+<template>
+	<view class="u-grid-item" :hover-class="parentData.hoverClass"
+	 :hover-stay-time="200" @tap="click" :style="{
+			background: bgColor,
+			width: width,
+		}">
+		<view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * gridItem 鎻愮ず
+	 * @description 瀹牸缁勪欢涓�鑸敤浜庡悓鏃跺睍绀哄涓悓绫婚」鐩殑鍦烘櫙锛屽彲浠ョ粰瀹牸鐨勯」鐩缃窘鏍囩粍浠�(badge)锛屾垨鑰呭浘鏍囩瓑锛屼篃鍙互鎵╁睍涓哄乏鍙虫粦鍔ㄧ殑杞挱褰㈠紡銆傛惌閰島-grid浣跨敤
+	 * @tutorial https://www.uviewui.com/components/grid.html
+	 * @property {String} bg-color 瀹牸鐨勮儗鏅鑹诧紙榛樿#ffffff锛�
+	 * @property {String Number} index 鐐瑰嚮瀹牸鏃讹紝杩斿洖鐨勫��
+	 * @property {Object} custom-style 鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+	 * @event {Function} click 鐐瑰嚮瀹牸瑙﹀彂
+	 * @example <u-grid-item></u-grid-item>
+	 */
+	export default {
+		name: "u-grid-item",
+		props: {
+			// 鑳屾櫙棰滆壊
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 鐐瑰嚮鏃惰繑鍥炵殑index
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 鑷畾涔夋牱寮忥紝瀵硅薄褰㈠紡
+			customStyle: {
+				type: Object,
+				default() {
+					return {
+						padding: '30rpx 0'
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				parentData: {
+					hoverClass: '', // 鎸変笅鍘荤殑鏃跺�欙紝鏄惁鏄剧ず鑳屾櫙鐏拌壊
+					col: 3, // 鐖剁粍浠跺垝鍒嗙殑瀹牸鏁�
+					border: true, // 鏄惁鏄剧ず杈规锛屾牴鎹埗缁勪欢鍐冲畾
+				}
+			};
+		},
+		created() {
+			// 鐖剁粍浠剁殑瀹炰緥
+			this.updateParentData();
+			// this.parent鍦╱pdateParentData()涓畾涔�
+			this.parent.children.push(this);
+		},
+		computed: {
+			// 姣忎釜grid-item鐨勫搴�
+			width() {
+				return 100 / Number(this.parentData.col) + '%';
+			},
+		},
+		methods: {
+			// 鑾峰彇鐖剁粍浠剁殑鍙傛暟
+			updateParentData() {
+				// 姝ゆ柟娉曞啓鍦╩ixin涓�
+				this.getParentData('u-grid');
+			},
+			click() {
+				this.$emit('click', this.index);
+				this.parent && this.parent.click(this.index);
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-grid-item {
+		box-sizing: border-box;
+		background: #fff;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+	}
+
+	.u-grid-item-hover {
+		background: #f7f7f7 !important;
+	}
+
+	.u-grid-marker-box {
+		position: absolute;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		line-height: 0;
+	}
+
+	.u-grid-marker-wrap {
+		position: absolute;
+	}
+
+	.u-grid-item-box {
+		padding: 30rpx 0;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		flex: 1;
+		width: 100%;
+		height: 100%;
+	}
+</style>

--
Gitblit v1.9.3