项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-row/components/uni-row/uni-row.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,190 @@
<template>
   <view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
      marginLeft:`${Number(marginValue)}rpx`,
      marginRight:`${Number(marginValue)}rpx`,
   }">
      <slot></slot>
   </view>
</template>

<script>
   const ComponentClass = 'uni-row';
   const modifierSeparator = '--';
   /**
    * Row   å¸ƒå±€-行
    * @description   æµå¼æ …格系统，随着屏幕或视口分为 24 ä»½ï¼Œå¯ä»¥è¿…速简便地创建布局。
    * @tutorial   https://ext.dcloud.net.cn/plugin?id=3958
    *
    * @property   {gutter} type = Number æ …格间隔
    * @property   {justify} type = String flex å¸ƒå±€ä¸‹çš„水平排列方式
    *                   å¯é€‰   start/end/center/space-around/space-between   start
    *                   é»˜è®¤å€¼   start
    * @property   {align} type = String flex å¸ƒå±€ä¸‹çš„垂直排列方式
    *                   å¯é€‰   top/middle/bottom
    *                   é»˜è®¤å€¼   top
    * @property   {width} type = String|Number nvue下需要自行配置宽度用于计算
    *                   é»˜è®¤å€¼ 750
    */


   export default {
      name: 'uniRow',
      componentName: 'uniRow',
      // #ifdef MP-WEIXIN
      options: {
         virtualHost: true // åœ¨å¾®ä¿¡å°ç¨‹åºä¸­å°†ç»„件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
      },
      // #endif
      props: {
         type: String,
         gutter: Number,
         justify: {
            type: String,
            default: 'start'
         },
         align: {
            type: String,
            default: 'top'
         },
         // nvue如果使用span等属性，需要配置宽度
         width: {
            type: [String, Number],
            default: 750
         }
      },
      created() {
         // #ifdef APP-NVUE
         this.type = 'flex';
         // #endif
      },
      computed: {
         marginValue() {
            // #ifndef APP-NVUE
            if (this.gutter) {
               return -(this.gutter / 2);
            }
            // #endif
            return 0;
         },
         typeClass() {
            return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
         },
         justifyClass() {
            return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
         },
         alignClass() {
            return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
         }
      }
   };
</script>

<style lang="scss">
   $layout-namespace: ".uni-";
   $row:$layout-namespace+"row";
   $modifier-separator: "--";

   @mixin utils-clearfix {
      $selector: &;

      @at-root {

         /* #ifndef APP-NVUE */
         #{$selector}::before,
         #{$selector}::after {
            display: table;
            content: "";
         }

         #{$selector}::after {
            clear: both;
         }

         /* #endif */
      }

   }

   @mixin utils-flex ($direction: row) {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: $direction;
   }

   @mixin set-flex($state) {
      @at-root &-#{$state} {
         @content
      }
   }

   #{$row} {
      position: relative;
      flex-direction: row;

      /* #ifdef APP-NVUE */
      flex: 1;
      /* #endif */

      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */

      // éžnvue使用float布局
      @include utils-clearfix;

      // åœ¨QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
      @at-root {

         /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
         &#{$modifier-separator}flex {
            @include utils-flex;
            flex-wrap: wrap;
            flex: 1;

            &:before,
            &:after {
               /* #ifndef APP-NVUE */
               display: none;
               /* #endif */
            }

            @include set-flex(justify-center) {
               justify-content: center;
            }

            @include set-flex(justify-end) {
               justify-content: flex-end;
            }

            @include set-flex(justify-space-between) {
               justify-content: space-between;
            }

            @include set-flex(justify-space-around) {
               justify-content: space-around;
            }

            @include set-flex(align-middle) {
               align-items: center;
            }

            @include set-flex(align-bottom) {
               align-items: flex-end;
            }
         }

         /* #endif */
      }

   }

   // å­—节、QQ配置后不生效
   // æ­¤å¤„用法无法使用
   /* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
   :host {
      display: block;
   }

   /* #endif */
</style>