Merge pull request ftdus#113 from Jan193/feature/createWebAndCreateBaseCpont

🎉 更新组件到官网

Author: didiaohu

src/components/col/src/col.vue

@@ -1,7 +1,5 @@
 <template>
-    <div :class="classList" :style="styles">
-        <slot></slot>
-    </div>
+  <div :class="classList" :style="styles"><slot></slot></div>
 </template>
 <script>
 const prefixCls = 'py-col';
@@ -50,21 +48,21 @@ export default {
       const classses = [
         `${prefixCls}`,
         {
-          [`${prefixCls}__span--${this.span}`]: this.span,
-          [`${prefixCls}--push-${this.push}`]: this.push,
-          [`${prefixCls}--pull-${this.pull}`]: this.pull,
-          [`${prefixCls}--offset-${this.offset}`]: this.offset,
+          [`${prefixCls}__span-${this.span}`]: this.span,
+          [`${prefixCls}__push-${this.push}`]: this.push,
+          [`${prefixCls}__pull-${this.pull}`]: this.pull,
+          [`${prefixCls}__offset-${this.offset}`]: this.offset,
         },
       ];
       this.sizes.forEach(size => {
         if (typeof this[size] === 'number') {
-          classses.push(`${prefixCls}__span--${size}-${this[size]}`);
+          classses.push(`${prefixCls}__span-${size}-${this[size]}`);
         } else if (typeof this[size] === 'object') {
           const props = this[size];
           Object.keys(props).forEach(prop => {
             classses.push(prop !== 'span'
-              ? `${prefixCls}-${size}--${prop}-${props[prop]}`
-              : `${prefixCls}__span--${size}-${props[prop]}`);
+              ? `${prefixCls}__${size}-${prop}-${props[prop]}`
+              : `${prefixCls}__span-${size}-${props[prop]}`);
           });
         }
       });

src/components/row/src/row.vue

@@ -1,7 +1,5 @@
 <template>
-    <div :class="classList" :style="styles">
-        <slot></slot>
-    </div>
+  <div :class="classList" :style="styles"><slot></slot></div>
 </template>
 <script>
 const prefixCls = 'py-row';
@@ -71,8 +69,8 @@ export default {
         {
           // [`${prefixCls}-${this.crevice}`]: this.crevice
           [`${prefixCls}__${this.type}`]: this.type,
-          [`${prefixCls}__flex-${this.justify}`]: this.justify,
-          [`${prefixCls}__flex-${this.align}`]: this.align,
+          [`${prefixCls}__flex--${this.justify}`]: this.justify,
+          [`${prefixCls}__flex--${this.align}`]: this.align,
         },
       ];
     },

src/styles/src/col.scss

@@ -1,72 +1,93 @@
 @charset "UTF-8";
 
-$prefixCls: 'py-col';
 $start: 1;
-$end: 24;
+$end: 25;
 $count: 100%/24;
-$name: '__span--';
+$name: 'span';
 
-.#{$prefixCls} {
+@include b(col) {
   position: relative;
   float: left;
   color: #fff;
   padding: 10px 0;
   text-align: center;
-  @for $s from $start to $end {
-    &#{$name}#{$s} {
+}
+
+@for $s from $start to $end {
+  @include e(span) {
+    @include m($s) {
       width: $count * $s;
     }
-    @media (max-width: 767px) {
-      &#{$name}xs-#{$s} {
+  }
+  @include e(offset) {
+    @include m($s) {
+      margin-left: $count * $s;
+    }
+  }
+  @media (max-width: 767px) {
+    @include e(span) {
+      @include m(xs-#{$s}) {
         display: block;
         width: $count * $s;
       }
-      &-xs {
-        &-offset-#{$s} {
-          margin-left: $count * $s;
-        }
+    }
+    @include e(xs) {
+      @include m(offset-#{$s}) {
+        margin-left: $count * $s;
       }
     }
-    @media screen and (min-width: 768px) and (max-width: 991px) {
-      &#{$name}sm-#{$s} {
+  }
+  @media screen and (min-width: 768px) and (max-width: 991px) {
+    @include e(span) {
+      @include m(sm-#{$s}) {
         display: block;
         width: $count * $s;
       }
-      &-sm {
-        &-offset-#{$s} {
-          margin-left: $count * $s;
-        }
+    }
+    @include e(sm) {
+      @include m(offset-#{$s}) {
+        margin-left: $count * $s;
       }
     }
-    @media screen and (min-width: 992px) and (max-width: 1199px) {
-      &#{$name}md-#{$s} {
+  }
+  @media screen and (min-width: 992px) and (max-width: 1199px) {
+    @include e(span) {
+      @include m(md-#{$s}) {
         display: block;
         width: $count * $s;
       }
-      &-md {
-        &-offset-#{$s} {
-          margin-left: $count * $s;
-        }
+    }
+    @include e(md) {
+      @include m(offset-#{$s}) {
+        margin-left: $count * $s;
       }
     }
-    @media (min-width: 1200px) {
-      &#{$name}lg-#{$s} {
+  }
+  @media (min-width: 1200px) {
+    @include e(span) {
+      @include m(lg-#{$s}) {
         display: block;
         width: $count * $s;
       }
-      &-lg {
-        &-offset-#{$s} {
-          margin-left: $count * $s;
-        }
+    }
+    @include e(lg) {
+      @include m(offset-#{$s}) {
+        margin-left: $count * $s;
       }
     }
-    &--offset-#{$s} {
+  }
+  @include e(offset) {
+    @include m($s) {
       margin-left: $count * $s;
     }
-    &--push-#{$s} {
+  }
+  @include e(push) {
+    @include m($s) {
       left: $count * $s;
     }
-    &--pull-#{$s} {
+  }
+  @include e(pull) {
+    @include m($s) {
       right: $count * $s;
     }
   }

src/styles/src/row.scss

@@ -2,7 +2,43 @@
 
 $prefixCls: 'py-row';
 
-.#{$prefixCls} {
+@include b(row) {
+  position: relative;
+  &:after {
+    content: ' ';
+    display: block;
+    clear: both;
+  }
+  @include e(flex) {
+    display: flex;
+    @include m(start) {
+      justify-content: start;
+    }
+    @include m(center) {
+      justify-content: center;
+    }
+    @include m(end) {
+      justify-content: flex-end;
+    }
+    @include m(space-between) {
+      justify-content: space-between;
+    }
+    @include m(space-around) {
+      justify-content: space-around;
+    }
+    @include m(top) {
+      align-items: flex-start;
+    }
+    @include m(bottom) {
+      align-items: flex-end;
+    }
+    @include m(middle) {
+      align-items: center;
+    }
+  }
+}
+
+/*.#{$prefixCls} {
   position: relative;
   &:after {
     content: ' ';
@@ -36,4 +72,4 @@ $prefixCls: 'py-row';
       align-items: center;
     }
   }
-}
+}*/