feat(tabs): tab panel's display directive can be set

demo/documentation/components/tabs/enUS/displayDirective.md

@@ -0,0 +1,69 @@
+# Display Directive
+You can set tab-panel's display directive to `if` or `show`. When use show, the tab-panel's content won't be reset after tab changes.
+```html
+<n-tabs v-model="tab">
+  <n-tab-panel name="show" display-directive="show" label="show">
+    <show-input />
+  </n-tab-panel>
+  <n-tab-panel name="if" display-directive="if" label="if">
+    <if-input />
+  </n-tab-panel>
+</n-tabs>
+```
+```js
+const showInput = {
+  data () {
+    return {
+      value: ''
+    }
+  },
+  render (h) {
+    return h('n-input', {
+      props: {
+        placeholder: 'My content won\'t be reset',
+        value: this.value
+      },
+      on: {
+        input: v => {
+          this.value = v
+        }
+      }
+    })
+  }
+}
+
+const ifInput = {
+  data () {
+    return {
+      value: ''
+    }
+  },
+  render (h) {
+    return h('n-input', {
+      props: {
+        placeholder: 'My content will be reset',
+        value: this.value
+      },
+      on: {
+        input: v => {
+          this.value = v
+        }
+      }
+    })
+  }
+}
+
+
+export default {
+  components: {
+    showInput,
+    ifInput
+  },
+  data () {
+    return {
+      tab: 'show',
+      value2: ''
+    }
+  }
+}
+```

demo/documentation/components/tabs/enUS/index.md

@@ -5,6 +5,7 @@ Switch contents in same area.
 basic
 flex-label
 card
+display-directive
 ```
 ## V-model
 V-model is not exposed now.
@@ -15,6 +16,7 @@ V-model is not exposed now.
 |type|`'line' \| 'card'`|`'line'`||
 |closable|`boolean`|`false`||
 |justify-content|`'space-between' \| 'space-around' \| 'space-evenly'`|`null`||
+|display-directive|`'if' \| 'show'`|`'if'`|The directive to use in conditionally rendering. 'if' will use 'v-if' and 'show' will use 'v-show'. When use show directive, the status of tab won't be reset after tab changes.|
 
 ### Tab Panel Props
 |Name|Type|Default|Description|

demo/documentation/components/tabs/zhCN/displayDirective.md

@@ -0,0 +1,69 @@
+# 展示指令
+可以制定标签页展示的指令为 `if` 或者 `show`。使用 `show` 的时候标签页内容不会随着切换重置。
+```html
+<n-tabs v-model="tab">
+  <n-tab-panel name="show" display-directive="show" label="show">
+    <show-input />
+  </n-tab-panel>
+  <n-tab-panel name="if" display-directive="if" label="if">
+    <if-input />
+  </n-tab-panel>
+</n-tabs>
+```
+```js
+const showInput = {
+  data () {
+    return {
+      value: ''
+    }
+  },
+  render (h) {
+    return h('n-input', {
+      props: {
+        placeholder: '我的内容不会被重置',
+        value: this.value
+      },
+      on: {
+        input: v => {
+          this.value = v
+        }
+      }
+    })
+  }
+}
+
+const ifInput = {
+  data () {
+    return {
+      value: ''
+    }
+  },
+  render (h) {
+    return h('n-input', {
+      props: {
+        placeholder: '我的内容会被重置',
+        value: this.value
+      },
+      on: {
+        input: v => {
+          this.value = v
+        }
+      }
+    })
+  }
+}
+
+
+export default {
+  components: {
+    showInput,
+    ifInput
+  },
+  data () {
+    return {
+      tab: 'show',
+      value2: ''
+    }
+  }
+}
+```

demo/documentation/components/tabs/zhCN/index.md

@@ -5,6 +5,7 @@
 basic
 flex-label
 card
+display-directive
 ```
 ## V-model
 V-model 暂时不对外暴露，名字没起好。
@@ -23,6 +24,7 @@ V-model 暂时不对外暴露，名字没起好。
 |label|`string`|`null`||
 |name|`string \| number`|`null`|**必需**|
 |disabled|`boolean`|`false`||
+|display-directive|`'if' \| 'show'`|`'if'`|选择性渲染使用的指令。if 对应 v-if，show 对应 v-show，使用 show 的时候标签页状态切换后不会被重置|
 
 ## Slots
 ### Tabs, Tab Panel Slots

src/Popover/src/main.js

@@ -102,7 +102,7 @@ export default {
       type: Boolean,
       default: false
     },
-    directive: {
+    displayDirective: {
       type: String,
       default: 'if'
     }

src/Tabs/src/TabPanel.vue

@@ -1,11 +1,3 @@
-<template>
-  <div
-    v-if="NTab && name === NTab.value"
-    class="n-tab-panel"
-  >
-    <slot />
-  </div>
-</template>
 <script>
 export default {
   name: 'NTabPanel',
@@ -22,6 +14,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    displayDirective: {
+      type: String,
+      default: 'if'
     }
   },
   data () {
@@ -33,9 +29,8 @@ export default {
       return this.NTab.type
     }
   },
-  mounted () {
+  created () {
     if (this.NTab) {
-      // console.log(this.NTab.value)
       this.NTab.addPanel(this)
     }
   },
@@ -43,6 +38,23 @@ export default {
     if (this.NTab) {
       this.NTab.removePanel(this)
     }
+  },
+  render (h) {
+    if (this.displayDirective === 'if') {
+      return this.NTab && this.name === this.NTab.value ? h('div', {
+        staticClass: 'n-tab-panel'
+      }, this.$slots.default) : null
+    } else {
+      return h('div', {
+        staticClass: 'n-tab-panel',
+        directives: [
+          {
+            name: 'show',
+            value: this.NTab && this.name === this.NTab.value
+          }
+        ]
+      }, this.$slots.default)
+    }
   }
 }
 </script>

think.md

@@ -136,9 +136,9 @@ Previously, it would not work with single quotes:
 23. Date 键盘操作 Time 键盘操作
 24. Time 格式化
 25. Date 格式化
-26. base cancel mark rename suffix
-27. base picker => base selection
-28. base lightbar => base tracking rect
+26. <del>base cancel mark rename suffix</del>s
+27. <del>base picker => base selection</del>
+28. <del>base lightbar => base tracking rect</del>
 29. loader 区分 debug 和 非 debug
 30. 逐步放宽对宽度必需传 number 的现实，尤其是对于 table
 31. <del>BaseLoading 代替 Log 里的 Spin</del>
@@ -146,7 +146,8 @@ Previously, it would not work with single quotes:
 33. Anchor 的另一种模式，追踪内容按照的是中间范围而不是自身大小
 34. <del>bug md-loader alert 内的 code 不显示</del> 不是 bug，md 就这么渲染
 35. backtop mounted blink
-36. Tab keep alive
+36. <del>Tab keep alive</del>
+37. Cascader submenu 的 lightbar 用 base tracking rect 代替
 
 
 ```