新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

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

@@ -1,190 +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配置后不生效
   // 此处用法无法使用scoped
   /* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
   :host {
      display: block;
   }

   /* #endif */
</style>
<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配置后不生效

   // 此处用法无法使用scoped

   /* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */

   :host {

      display: block;

   }



   /* #endif */

</style>