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