fix:地图

quanyawei

2024-01-10 e13367edf304cb78f978e321f1679299a66b3a23

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

New file
@@ -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>