store

demo/components/formDemo.vue

@@ -182,7 +182,10 @@
             :label-width="200"
             label-position="top"
           >
-            <n-form-item label="Top1">
+            <n-form-item
+              required
+              label="Top1"
+            >
               <n-input />
             </n-form-item>
             <n-form-item label="Top2">

demo/components/tabDemo.vue

@@ -31,7 +31,10 @@
                 </n-form-item>
               </n-form>
             </n-tab-panel>
-            <n-tab-panel label="lal">
+            <n-tab-panel
+              active
+              label="table"
+            >
               <n-advance-table
                 :columns="columns0"
                 :data="data"
@@ -41,6 +44,9 @@
                 </template>
               </n-advance-table>
             </n-tab-panel>
+            <n-tab-panel label="input">
+              haha: <n-input />
+            </n-tab-panel>
           </n-tab>
         </div>
         <div class="n-doc-section__source" />

packages/common/Form/src/form-item.vue

@@ -7,7 +7,9 @@
       :class="`${prefix}__label`"
       :style="style"
     >
-      {{ label }}
+      <span :class="`${prefix}__label-span`">
+        {{ label }}
+      </span>
     </label>
     <div
       class="n-form-item__content"

packages/common/Tab/src/TabPanel.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="NTabPanel">
-    <div v-show="isShow">
-      <slot />
-    </div>
+  <div
+    :class="cls"
+    :style="style"
+  >
+    <slot />
   </div>
 </template>
 <script>
@@ -25,22 +26,40 @@ export default {
   },
   data () {
     return {
-      isShow: false
+      isShow: false,
+      style: {}
     }
   },
   computed: {
+    cls () {
+      return this.isShow ? 'n-tab-panel n-tab-panel_active' : 'n-tab-panel'
+    },
+    order () {
+      return this.$vnode._NaiveTabOrder
+    }
+  },
+  watch: {
+    order: {
+
+    }
   },
   created () {
     this.NTab.updateLabels()
     this.initActive()
+    // this.setTransfer('-', )
   },
   methods: {
-    updateIsShow (flag) {
+    updateIsShow (flag, dir = 'left') {
       this.isShow = flag
+      // window.getComputedStyle(this.NTab.refs['slot'], null).getPropertyValue('width')
+      // this.$refs['panel'].classList.toggle('n-tab-panel_active')
       // 这里应该是根据切换的方向(左右) 来设置
     },
+    setTransfer (dir, per) {
+      this.style.transform = 'translateX(' + dir + per + '%)'
+    },
     initActive () {
-      if ((this.active || this.NTab.name === this.name) && this.NTab.active === null) {
+      if ((this.active || (this.NTab.name === this.name && this.name !== undefined)) && this.NTab.active === null) {
         this.updateIsShow(true)
         this.NTab.initActive()
       }

packages/common/Tab/src/main.vue

@@ -14,7 +14,12 @@
         {{ label }}
       </div>
     </div>
-    <slot />
+    <div
+      ref="slot"
+      class="n-tab--slot"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 <script>
@@ -38,7 +43,7 @@ export default {
     }
   },
   created () {
-    // this.updateOrder()
+    this.updateOrder()
     // this.initActive()
   },
   beforeMount () {
@@ -78,10 +83,8 @@ export default {
     },
     updateOrder () {
       // method duplicate with updateLabels
-      this.$children.forEach((i, order) => {
-        if (i.$options.name === 'NTabPanel') {
-          i._NaiveTabOrder = order
-        }
+      this.$slots.default.forEach((i, order) => {
+        i._NaiveTabOrder = order
       })
     }
   }

styles/Form.scss

@@ -19,11 +19,12 @@
     .n-form-item__label {
       display: block;
       overflow-wrap: unset;
+      padding-top: 0;
       align-items: center;
       text-align: left;
     }
   }
-  .n-form-item__label--require .n-form-item__label::before {
+  .n-form-item__label--require .n-form-item__label-span::before {
     float: right;
     content: '*';
     color:rgba(255, 146, 164, 1);
@@ -59,6 +60,9 @@
     padding: 10px 10px 10px 0; 
     overflow-wrap: break-word;
   }
+  .n-form-item__label-span {
+    display: inline-block;
+  }
   .n-form-item__content {
     position: relative;
     flex-grow: 1;

styles/Tab.scss

@@ -2,7 +2,6 @@
 @import './theme/default.scss';
 
 @include b(tab) {
-  display: block;
   width: 100%;
   height: 100%;
   .n-tab--label {
@@ -19,4 +18,23 @@
       color: aquamarine;
     }
   }
+  .n-tab--slot {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+@include b(tab-panel) {
+  position: absolute;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  transition: width 0.3s;
+  &.n-tab-panel_active {
+    visibility: visible;
+  }
 }