Merge pull request #179 from kaola-fed/feature_tabs_fresh

[kl-tabs] 增加 fresh 属性，每次切换都重新渲染
kaola-fed · Aug 2, 2017 · 8175635 · 8175635
2 parents 84c120f + f6d10d4
commit 8175635
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/src/js/components/navigation/KLTabs/KLTab/index.html b/src/js/components/navigation/KLTabs/KLTab/index.html
@@ -0,0 +1,7 @@
+{#if this.$outer.data.fresh}
+{#if this.$outer.data.selected === this}
+<div>{#inc this.$body}</div>
+{/if}
+{#else}
+<div r-hide={this.$outer.data.selected !== this}>{#inc this.$body}</div>
+{/if}
diff --git a/src/js/components/navigation/KLTabs/KLTab/index.js b/src/js/components/navigation/KLTabs/KLTab/index.js
@@ -6,6 +6,7 @@
 
 const Component = require('../../../../ui-base/component');
 const _ = require('../../../../ui-base/_');
+const template = require('./index.html');
 const KLTabs = require('../index');
 
 /**
@@ -17,8 +18,7 @@ const KLTabs = require('../index');
  */
 const KLTab = Component.extend({
   name: 'kl-tab',
-  template:
-    '<div r-hide={this.$outer.data.selected !== this}>{#inc this.$body}</div>',
+  template,
   /**
      * @protected
      */

diff --git a/src/js/components/navigation/KLTabs/index.js b/src/js/components/navigation/KLTabs/index.js
@@ -24,6 +24,7 @@ const _ = require('../../../ui-base/_');
  * @param {object}        [options.data.selected=null]        <=> 当前选择卡
  * @param {string}        [options.data.titleTemplate=null]   @=> 标题模板
  * @param {string}        [options.data.defaultKey=null]      => 默认显示对应 key 的 Tab
+ * @param {boolean}       [options.data.refresh=false]        => 切换 Tab 是否重新渲染
  * @param {boolean}       [options.data.readonly=false]       => 是否只读
  * @param {boolean}       [options.data.disabled=false]       => 是否禁用
  * @param {boolean}       [options.data.visible=true]         => 是否显示

diff --git a/src/js/components/navigation/KLTabs/index.md b/src/js/components/navigation/KLTabs/index.md
@@ -14,7 +14,22 @@ title: 选项卡
     <kl-tab title="Tab1">Content1</kl-tab>
     <kl-tab title="Tab2">Content2</kl-tab>
     <kl-tab title="Tab3">Content3</kl-tab>
-    <kl-tab title="Tab4">Content4</kl-tab>
+    <kl-tab title="Tab4"><kl-input /></kl-tab>
+</kl-tabs>
+```
+<!-- demo_end -->
+
+### 每次切换 Tab 时重新渲染
+
+<!-- demo_start -->
+<div class="m-example"></div>
+
+```xml
+<kl-tabs fresh={true}>
+    <kl-tab title="Tab1">Content1</kl-tab>
+    <kl-tab title="Tab2">Content2</kl-tab>
+    <kl-tab title="Tab3">Content3</kl-tab>
+    <kl-tab title="Tab4"><kl-input /></kl-tab>
 </kl-tabs>
 ```
 <!-- demo_end -->