refactor: layout优化

src/packages/col/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <view class="nut-col" :class="classObject" :style="styleObj">
+  <view :class="classes" :style="style">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { reactive, inject } from 'vue';
+import { reactive, computed, inject } from 'vue';
 import { createComponent } from '@/utils/create';
-const { create } = createComponent('col');
+const { componentName, create } = createComponent('col');
 
 export default create({
   props: {
@@ -20,18 +20,24 @@ export default create({
     }
   },
   setup(props, { emit, slots }) {
+    const prefixCls = componentName;
     const gutter = inject('gutter');
-    const classObject = reactive({
-      ['nut-col-' + props.span]: true,
-      ['nut-col-offset-' + props.offset]: true
+    const classes = computed(() => {
+      return {
+        [prefixCls]: true,
+        ['nut-col-' + props.span]: true,
+        ['nut-col-offset-' + props.offset]: true
+      };
     });
-    const styleObj = reactive({
-      'padding-left': gutter + 'px',
-      'padding-right': gutter + 'px'
+    const style = computed(() => {
+      return {
+        paddingLeft: gutter + 'px',
+        paddingRight: gutter + 'px'
+      };
     });
     return {
-      classObject,
-      styleObj
+      classes,
+      style
     };
   }
 });

src/packages/layout/demo.vue

@@ -119,7 +119,10 @@
 <script lang="ts">
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('layout');
-export default createDemo({});
+
+export default createDemo({
+  props: {}
+});
 </script>
 
 <style lang="scss" scoped>

src/packages/layout/doc.md

@@ -316,8 +316,7 @@ app.use(Col);
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | type | 布局方式，可选值为flex | String | -
-| gutter | 列元素之间的间距（单位为px） | String/Number | -
-| tag | 自定义元素标签 | String | div
+| gutter | 列元素之间的间距（单位为px） | String、Number | -
 | justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | String | start
 | align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start
 | flex-wrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap
@@ -326,6 +325,6 @@ app.use(Col);
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String/Number | -
-| offset | 列元素偏移距离 | String/Number | - 
+| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String、Number | 24
+| offset | 列元素偏移距离 | String、Number | 0
 

src/packages/row/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-row" :class="getClassObject()">
+  <view :class="getClasses()">
     <slot></slot>
   </view>
 </template>
@@ -18,10 +18,6 @@ export default create({
       type: [String, Number],
       default: ''
     },
-    tag: {
-      type: String,
-      default: 'div'
-    },
     justify: {
       type: String,
       default: 'start'
@@ -35,26 +31,28 @@ export default create({
       default: 'nowrap'
     }
   },
-  setup(props, { slots }) {
+  setup(props) {
+    const prefixCls = componentName;
     provide('gutter', props.gutter);
-    const getClass = (prefix, type) => {
+    const getClass = (prefix: string, type: string) => {
       return prefix
         ? type
           ? `nut-row-${prefix}-${type}`
           : ''
         : `nut-row-${type}`;
     };
-    const getClassObject = () => {
+    const getClasses = () => {
       return `
               ${getClass('', props.type)}
               ${getClass('justify', props.justify)}
               ${getClass('align', props.align)}
               ${getClass('flex', props.flexWrap)}
+              ${prefixCls}
               `;
     };
 
     return {
-      getClassObject
+      getClasses
     };
   }
 });