From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-grid-item/u-grid-item.vue | 209 ----------------------------------------------------
1 files changed, 0 insertions(+), 209 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
index fc0c7cf..e69de29 100644
--- 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
@@ -1,209 +0,0 @@
-<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