From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改

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

diff --git a/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue b/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue
new file mode 100644
index 0000000..fc0c7cf
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue
@@ -0,0 +1,209 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view
+	    class="u-grid-item"
+	    hover-class="u-grid-item--hover-class"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<view
+	    class="u-grid-item"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * gridItem ������
+	 * @description ������������������������������������������������������������������������������������������������������������(badge)���������������������������������������������������������������������������u-grid������
+	 * @tutorial https://www.uviewui.com/components/grid.html
+	 * @property {String | Number}	name		���������name ( ������ null )
+	 * @property {String}			bgColor		��������������������� ��������� 'transparent' ���
+	 * @property {Object}			customStyle	������������������������������
+	 * @event {Function} click ������������������
+	 * @example <u-grid-item></u-grid-item>
+	 */
+	export default {
+		name: "u-grid-item",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				parentData: {
+					col: 3, // ���������������������������
+					border: true, // ������������������������������������������
+				},
+				// #ifdef APP-NVUE
+				width: 0, // nvue���������������������vue���������computed���������������������������������������
+				// #endif
+				classes: [], // ���������������������������������������������������������
+			};
+		},
+		mounted() {
+			this.init()
+		},
+		computed: {
+			// #ifndef APP-NVUE
+			// vue���������computed���������������������������������������
+			width() {
+				return 100 / Number(this.parentData.col) + '%'
+			},
+			// #endif
+			itemStyle() {
+				const style = {
+					background: this.bgColor,
+					width: this.width
+				}
+				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			init() {
+				// ������������������u-grid���children������������������������������
+				// ������������item���������
+				uni.$on('$uGridItem', () => {
+					this.gridItemClasses()
+				})
+				// ������������������
+				this.updateParentData()
+				// #ifdef APP-NVUE
+				// ������������������������������nvue���������������������
+				this.$nextTick(function(){
+					this.getItemWidth()
+				})
+				// #endif
+				// ������������������������������grid-item������������������������������
+				uni.$emit('$uGridItem')
+				this.gridItemClasses()
+			},
+			// ������������������������
+			updateParentData() {
+				// ���������������mixin���
+				this.getParentData('u-grid');
+			},
+			clickHandler() {
+				let name = this.name
+				// ������������������name���������������������������children������������������������������������������������this������������������������������������
+				const children = this.parent?.children
+				if(children && this.name === null) {
+					name = children.findIndex(child => child === this)
+				}
+				// ������������������������������������
+				this.parent && this.parent.childClick(name)
+				this.$emit('click', name)
+			},
+			async getItemWidth() {
+				// ���������nvue���������������������������������������������������
+				let width = 0
+				if(this.parent) {
+					// ���������������������������������������������������������item���������
+					const parentWidth = await this.getParentWidth()
+					width = parentWidth / Number(this.parentData.col) + 'px'
+				}
+				this.width = width
+			},
+			// ������������������������
+			getParentWidth() {
+				// #ifdef APP-NVUE
+				// ������������promise������������������������await������������
+				const dom = uni.requireNativePlugin('dom')
+				return new Promise(resolve => {
+					// ������������������ref
+					dom.getComponentRect(this.parent.$refs['u-grid'], res => {
+						resolve(res.size.width)
+					})
+				})
+				// #endif
+			},
+			gridItemClasses() {
+				if(this.parentData.border) {
+					const classes = []
+					this.parent.children.map((child, index) =>{
+						if(this === child) {
+							const len = this.parent.children.length
+							// ���������������������������child������������������������������������������2���������������������������������
+							if((index + 1) % this.parentData.col !== 0 && index + 1 !== len) {
+								classes.push('u-border-right')
+							}
+							// ���������������������������������������
+							// ������������������������0������������������������������������������������������������������
+							const lessNum = len % this.parentData.col === 0 ? this.parentData.col : len % this.parentData.col
+							// ������������������child������������������
+							if(index < len - lessNum) {
+								classes.push('u-border-bottom')
+							}
+						}
+					})
+					// ������������������������������������������������������������������������������������������������������","������������������
+					// #ifdef MP-ALIPAY || MP-TOUTIAO
+					classes = classes.join(' ')
+					// #endif
+					this.classes = classes
+				}
+			}
+		},
+		beforeDestroy() {
+			// ���������������������������������
+			uni.$off('$uGridItem')
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+      $u-grid-item-hover-class-opcatiy:.5 !default;
+      $u-grid-item-margin-top:1rpx !default;
+      $u-grid-item-border-right-width:0.5px !default;
+      $u-grid-item-border-bottom-width:0.5px !default;
+      $u-grid-item-border-right-color:$u-border-color !default;
+      $u-grid-item-border-bottom-color:$u-border-color !default;
+	.u-grid-item {
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+
+		/* #ifdef MP-WEIXIN */
+		margin-top:$u-grid-item-margin-top;
+		/* #endif */
+
+		&--hover-class {
+			opacity:$u-grid-item-hover-class-opcatiy;
+		}
+	}
+
+	/* #ifdef APP-NVUE */
+	// ������nvue������������������������app.vue������������������������������������������������
+	.u-border-right {
+		border-right-width:$u-grid-item-border-right-width;
+		border-color: $u-grid-item-border-right-color;
+	}
+
+	.u-border-bottom {
+		border-bottom-width:$u-grid-item-border-bottom-width;
+		border-color:$u-grid-item-border-bottom-color;
+	}
+
+	/* #endif */
+</style>

--
Gitblit v1.8.0