From 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 10 Nov 2023 13:08:29 +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