From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue | 209 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 209 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue b/minipro_standard/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue
new file mode 100644
index 0000000..fc0c7cf
--- /dev/null
+++ b/minipro_standard/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)锛屾垨鑰呭浘鏍囩瓑锛屼篃鍙互鎵╁睍涓哄乏鍙虫粦鍔ㄧ殑杞挱褰㈠紡銆傛惌閰島-grid浣跨敤
+ * @tutorial https://www.uviewui.com/components/grid.html
+ * @property {String | Number} name 瀹牸鐨刵ame ( 榛樿 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涓嬫墠杩欎箞璁＄畻锛寁ue涓嬫斁鍒癱omputed涓紝鍚﹀垯浼氬洜涓哄欢鏃堕�犳垚闂儊
+ // #endif
+ classes: [], // 绫诲悕闆嗗悎锛岀敤浜庡垽鏂槸鍚︽樉绀哄彸杈瑰拰涓嬭竟妗�
+ };
+ },
+ mounted() {
+ this.init()
+ },
+ computed: {
+ // #ifndef APP-NVUE
+ // vue涓嬫斁鍒癱omputed涓紝鍚﹀垯浼氬洜涓哄欢鏃堕�犳垚闂儊
+ 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鐨刢hildren涓娣诲姞鍏ュ瓙缁勪欢鏃讹紝
+ // 閲嶆柊璁＄畻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() {
+ // 姝ゆ柟娉曞啓鍦╩ixin涓�
+ 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() {
+ // 濡傛灉鏄痭vue锛屼笉鑳戒娇鐢ㄧ櫨鍒嗘瘮锛屽彧鑳戒娇鐢ㄥ浐瀹氬搴�
+ let width = 0
+ if(this.parent) {
+ // 鑾峰彇鐖剁粍浠跺搴﹀悗锛岄櫎浠ユ爡鏍兼暟锛屽緱鍑烘瘡涓猧tem鐨勫搴�
+ const parentWidth = await this.getParentWidth()
+ width = parentWidth / Number(this.parentData.col) + 'px'
+ }
+ this.width = width
+ },
+ // 鑾峰彇鐖跺厓绱犵殑灏哄
+ getParentWidth() {
+ // #ifdef APP-NVUE
+ // 杩斿洖涓�涓猵romise锛岃璋冪敤鑰呭彲浠ョ敤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
+ // 璐磋繎鍙宠竟灞忓箷杈规部鐨刢hild锛屽苟涓旀渶鍚庝竴涓紙姣斿鍙湁妯悜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
+ // 鏈�涓嬮潰鐨勪竴鎺抍hild锛屾棤闇�涓嬭竟妗�
+ 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.9.3