bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
<template>
   <view
       class="u-col"
      ref="u-col"
       :class="[
         'u-col-' + span
      ]"
       :style="[colStyle]"
       @tap="clickHandler"
   >
      <slot></slot>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * CodeInput æ …格系统的列 
    * @description è¯¥ç»„件一般用于Layout å¸ƒå±€ é€šè¿‡åŸºç¡€çš„ 12 åˆ†æ ï¼Œè¿…速简便地创建布局
    * @tutorial https://www.uviewui.com/components/Layout.html
    * @property {String | Number}   span      æ …格占据的列数，总12等份 (默认 12 ) 
    * @property {String | Number}   offset      åˆ†æ å·¦è¾¹åç§»ï¼Œè®¡ç®—方式与span相同 (默认 0 ) 
    * @property {String}         justify      æ°´å¹³æŽ’列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)  (默认 'start' ) 
    * @property {String}         align      åž‚直对齐方式，可选值为top、center、bottom、stretch (默认 'stretch' ) 
    * @property {String}         textAlign   æ–‡å­—水平对齐方式 (默认 'left' ) 
    * @property {Object}         customStyle   å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    * @event {Function}   click   col被点击，会阻止事件冒泡到row
    * @example    <u-col  span="3" offset="3" > <view class="demo-layout bg-purple"></view> </u-col>
    */
   export default {
      name: 'u-col',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            width: 0,
            parentData: {
               gutter: 0
            },
            gridNum: 12
         }
      },
      computed: {
         uJustify() {
            if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify
            else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify
            else return this.justify
         },
         uAlignItem() {
            if (this.align == 'top') return 'flex-start'
            if (this.align == 'bottom') return 'flex-end'
            else return this.align
         },
         colStyle() {
            const style = {
               // è¿™é‡Œå†™æˆ"padding: 0 10px"的形式是因为nvue的需要
               paddingLeft: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2),
               paddingRight: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2),
               alignItems: this.uAlignItem,
               justifyContent: this.uJustify,
               textAlign: this.textAlign,
               // #ifndef APP-NVUE
               // åœ¨éžnvue上，使用百分比形式
               flex: `0 0 ${100 / this.gridNum * this.span}%`,
               marginLeft: 100 / 12 * this.offset + '%',
               // #endif
               // #ifdef APP-NVUE
               // åœ¨nvue上，由于无法使用百分比单位，这里需要获取父组件的宽度，再计算得出该有对应的百分比尺寸
               width: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.span))),
               marginLeft: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.offset))),
               // #endif
            }
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
         }
      },
      mounted() {
         this.init()
      },
      methods: {
         async init() {
            // æ”¯ä»˜å®å°ç¨‹åºä¸æ”¯æŒprovide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
            this.updateParentData()
            this.width = await this.parent.getComponentWidth()
         },
         updateParentData() {
            this.getParentData('u-row')
         },
         clickHandler(e) {
            this.$emit('click');
         }
      },
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-col {
      padding: 0;
      /* #ifndef APP-NVUE */
      box-sizing:border-box;
      /* #endif */
      /* #ifdef MP */
      display: block;
      /* #endif */
   }

   // nvue下百分比无效
   /* #ifndef APP-NVUE */
   .u-col-0 {
      width: 0;
   }

   .u-col-1 {
      width: calc(100%/12);
   }

   .u-col-2 {
      width: calc(100%/12 * 2);
   }

   .u-col-3 {
      width: calc(100%/12 * 3);
   }

   .u-col-4 {
      width: calc(100%/12 * 4);
   }

   .u-col-5 {
      width: calc(100%/12 * 5);
   }

   .u-col-6 {
      width: calc(100%/12 * 6);
   }

   .u-col-7 {
      width: calc(100%/12 * 7);
   }

   .u-col-8 {
      width: calc(100%/12 * 8);
   }

   .u-col-9 {
      width: calc(100%/12 * 9);
   }

   .u-col-10 {
      width: calc(100%/12 * 10);
   }

   .u-col-11 {
      width: calc(100%/12 * 11);
   }

   .u-col-12 {
      width: calc(100%/12 * 12);
   }

   /* #endif */
</style>