bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-grid/u-grid.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,97 @@
<template>
   <view
       class="u-grid"
      ref='u-grid'
       :style="[gridStyle]"
   >
      <slot />
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * grid å®«æ ¼å¸ƒå±€
    * @description å®«æ ¼ç»„件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
    * @tutorial https://www.uviewui.com/components/grid.html
    * @property {String | Number}   col         å®«æ ¼çš„列数（默认 3 ï¼‰
    * @property {Boolean}         border      æ˜¯å¦æ˜¾ç¤ºå®«æ ¼çš„边框（默认 false ï¼‰
    * @property {String}         align      å®«æ ¼å¯¹é½æ–¹å¼ï¼Œè¡¨çŽ°ä¸ºæ•°é‡å°‘的时候，靠左，居中，还是靠右 ï¼ˆé»˜è®¤ 'left' ï¼‰
    * @property {Object}         customStyle   å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    * @event {Function} click ç‚¹å‡»å®«æ ¼è§¦å‘
    * @example <u-grid :col="3" @click="click"></u-grid>
    */
   export default {
      name: 'u-grid',
      mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
      data() {
         return {
            index: 0,
            width: 0
         }
      },
      watch: {
         // å½“父组件需要子组件需要共享的参数发生了变化，手动通知子组件
         parentData() {
            if (this.children.length) {
               this.children.map(child => {
                  // åˆ¤æ–­å­ç»„件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
                  typeof(child.updateParentData) == 'function' && child.updateParentData();
               })
            }
         },
      },
      created() {
         // å¦‚果将children定义在data中，在微信小程序会造成循环引用而报错
         this.children = []
      },
      computed: {
         // è®¡ç®—父组件的值是否发生变化
         parentData() {
            return [this.hoverClass, this.col, this.size, this.border];
         },
         // å®«æ ¼å¯¹é½æ–¹å¼
         gridStyle() {
            let style = {};
            switch (this.align) {
               case 'left':
                  style.justifyContent = 'flex-start';
                  break;
               case 'center':
                  style.justifyContent = 'center';
                  break;
               case 'right':
                  style.justifyContent = 'flex-end';
                  break;
               default:
                  style.justifyContent = 'flex-start';
            };
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
         }
      },
      methods: {
         // æ­¤æ–¹æ³•ç”±u-grid-item触发，用于在u-grid发出事件
         childClick(name) {
            this.$emit('click', name)
         }
      }
   };
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
     $u-grid-width:100% !default;
   .u-grid {
      /* #ifdef MP */
      width: $u-grid-width;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      display: block;
      /* #endif */
      justify-content: center;
      @include flex;
      flex-wrap: wrap;
      align-items: center;
   }
</style>