flex组件新增可以动态改变nut-col的:span的值

src/packages/col/col.scss

@@ -12,27 +12,13 @@
 	float: left;
 	box-sizing: border-box;
 }
-.nut-col-12{
-	width: 50%;
-}
-.nut-col-8{
-	width: 33.33333%;
-}
-.nut-col-6{
-	width: 25%;
-}
-.nut-col-4{
-	width: 16.66667%;
-}
-.nut-col-offset-12{
-	margin-left: 50%;
-}
-.nut-col-offset-8{
-	margin-left: 33.33333%;
-}
-.nut-col-offset-6{
-	margin-left: 25%;
-}
-.nut-col-offset-4{
-	margin-left: 16.66667%;
+
+@for $i from 1 through 24 {
+    .nut-col-offset-#{$i} {
+        margin-left: 100/24*$i*1%;
+    }
+
+	.nut-col-#{$i}{
+		width: 100/24*$i*1%;
+	}
 }

src/packages/col/col.vue

@@ -18,18 +18,21 @@ export default {
     },
     data() {
         return {
-            classObject:{
-                'nut-col-12':this.span == '12',
-                'nut-col-8':this.span == '8',
-                'nut-col-6':this.span == '6',
-                'nut-col-4':this.span == '4',
-                'nut-col-offset-12':this.offset == '12',
-                'nut-col-offset-8':this.offset == '8',
-                'nut-col-offset-6':this.offset == '6',
-                'nut-col-offset-4':this.offset == '4'
-            }
+            classObject:{}
         };
     },
+    watch:{
+        span:{
+          handler(val){
+            if(val){
+                this.classObject = {
+                    ['nut-col-'+val]:this.span == val,
+                }
+            }
+          },
+          immediate: true
+        }
+    },
     methods: {
     }
 }

src/packages/flex/demo.vue

@@ -35,8 +35,8 @@
         <nut-col :span="6">
           <div class="flex-content">span:6</div>
         </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">span:6</div>
+        <nut-col :span="myValue">
+          <div class="flex-content flex-content-light">span:{{myValue}}</div>
         </nut-col>
       </nut-row>
     </div>
@@ -304,6 +304,16 @@
 
 <script>
 export default {
+  data() {
+      return {
+          myValue:4
+      };
+  },
+  methods:{
+    text(){
+      this.myValue++;
+    }
+  }
 };
 </script>