Merge branch 'v2-dev' of https://github.com/jdf2e/nutui into v2-dev

src/packages/tab/demo.vue

@@ -87,6 +87,31 @@
       <nut-button @click="resetHandler" type="light">重置Tab页面</nut-button>
       <nut-button @click="clickHandler">更新Tab页面</nut-button>
     </div>
+
+    <h4>支持slot</h4>
+
+    <nut-tab :def-index="defIndex" :initData="slotTabs" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :is-show-line="false">
+      <nut-tab-panel
+        v-for="value in slotTabs"
+        v-bind:key="value.tabTitle"
+        :tab-title="value.tabTitle"
+        :tab-slot="value.slot"
+        v-html="value.content"
+      ></nut-tab-panel>
+      <template v-slot:customSlot="{ item }">{{ item.tabSlot }} {{ item.tabTitle }}</template>
+    </nut-tab>
+
+    <h4>支持徽标badge</h4>
+
+    <nut-tab :def-index="defIndex" :initData="badgeTabs" @tab-switch="tabSwitch" :contentShow="true">
+      <nut-tab-panel
+        v-for="value in badgeTabs"
+        v-bind:key="value.tabTitle"
+        :tab-title="value.tabTitle"
+        :badge="value.badge"
+        v-html="value.content"
+      ></nut-tab-panel>
+    </nut-tab>
   </div>
 </template>
 
@@ -141,6 +166,47 @@ export default {
           iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
           content: '<p>电影票内容</p>'
         }
+      ],
+      slotTabs: [
+        {
+          tabTitle: '衣物',
+          slot: 'customSlot',
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          slot: '',
+          content: '<p>日用品内容</p>'
+        }
+      ],
+      badgeTabs: [
+        {
+          tabTitle: '衣物',
+          badge: {
+            value: 10
+          },
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          badge: {
+            value: 100,
+            max: 99
+          },
+          content: '<p>日用品内容</p>'
+        },
+        {
+          tabTitle: '运动器材',
+          badge: {
+            value: 100,
+            isDot: true
+          },
+          content: '<p>运动器材内容</p>'
+        },
+        {
+          tabTitle: '电影票',
+          content: '<p>电影票内容</p>'
+        }
       ]
     };
   },

src/packages/tab/doc.md

@@ -219,6 +219,106 @@ export default {
 };
 ```
 
+## 支持slot
+
+```html
+<nut-tab :def-index="defIndex" :initData="slotTabs" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :is-show-line="false">
+  <nut-tab-panel
+    v-for="value in slotTabs"
+    v-bind:key="value.tabTitle"
+    :tab-title="value.tabTitle"
+    :tab-slot="value.slot"
+    v-html="value.content"
+  ></nut-tab-panel>
+  <template v-slot:customSlot="{item}">{{ item.tabSlot }} {{ item.tabTitle }}</template>
+</nut-tab>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      defIndex: 1,
+      positionNavCurr:'top',
+      slotTabs: [
+        {
+          tabTitle: '衣物',
+          slot: 'customSlot',
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          slot: '',
+          content: '<p>日用品内容</p>'
+        }
+      ],
+    };
+  },
+  methods: {
+      tabSwitch:function(index,event){
+        console.log(index+'--'+event.target);
+      },
+};
+```
+
+## 支持徽标badge
+
+
+```html
+<nut-tab :def-index="defIndex" :initData="badgeTabs" @tab-switch="tabSwitch" :contentShow="true">
+  <nut-tab-panel
+    v-for="value in badgeTabs"
+    v-bind:key="value.tabTitle"
+    :tab-title="value.tabTitle"
+    :badge="value.badge"
+    v-html="value.content"
+  ></nut-tab-panel>
+</nut-tab>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      defIndex: 1,
+      positionNavCurr:'top',
+      badgeTabs: [
+        {
+          tabTitle: '衣物',
+          badge: {
+            value: 10
+          },
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          badge: {
+            value: 100,
+            max: 99
+          },
+          content: '<p>日用品内容</p>'
+        },
+        {
+          tabTitle: '运动器材',
+          badge: {
+            value: 100,
+            isDot: true
+          },
+          content: '<p>运动器材内容</p>'
+        },
+        {
+          tabTitle: '电影票',
+          content: '<p>电影票内容</p>'
+        }
+      ]
+    };
+  },
+  methods: {
+      tabSwitch:function(index,event){
+        console.log(index+'--'+event.target);
+      },
+};
+```
 
 ### Prop
 
@@ -239,6 +339,8 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | tab-title | 页签的标题 | String | ''
+| tab-slot | 页签的插槽名 | String | ''
+| badge | [徽标组件](/#/badge)属性 | Object | false
 | icon-url | 页签的图标地址 | String | ''
 | content | 页签的自定义内容 | String | ''
 | disable | 是否禁用页签 |Boolean|false|

src/packages/tab/tab.vue

@@ -12,8 +12,27 @@
           :class="[titleNavList, 'nut-title-nav', { 'nut-tab-disable': value.disable }, { 'nut-tab-active': activeIndex == index }]"
         >
           <a class="nut-tab-link" v-on:click="switchTab(index, $event, value.disable)">
-            <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
-            {{ value.tabTitle }}
+            <!-- 启用slot -->
+            <slot v-if="!!value.tabSlot" :name="value.tabSlot" v-bind:item="value"></slot>
+            <!-- 启用徽标 -->
+            <nut-badge
+              v-else-if="!!value.badge"
+              :value="value.badge.value"
+              :max="value.badge.max"
+              :zIndex="value.badge.zIndex"
+              :isDot="value.badge.isDot"
+              :hidden="value.badge.hidden"
+              :top="value.badge.top"
+              :left="value.badge.left"
+            >
+              <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
+              {{ value.tabTitle }}
+            </nut-badge>
+            <!-- 原来的逻辑 -->
+            <template v-else>
+              <i class="nut-tab-icon" :style="{ backgroundImage: 'url(' + value.iconUrl + ')' }" v-if="value.iconUrl"></i>
+              {{ value.tabTitle }}
+            </template>
           </a>
         </span>
       </div>
@@ -159,7 +178,9 @@ export default {
           let item = {
             tabTitle: attrs['tab-title'] || attrs['tabTitle'],
             disable: attrs.disable === false,
-            iconUrl: attrs['iconUrl'] || attrs['icon-url']
+            iconUrl: attrs['iconUrl'] || attrs['icon-url'],
+            tabSlot: attrs['tab-slot'] || attrs['tabSlot'] || '',
+            badge: attrs['badge'] || false
           };
           this.tabTitleList.push(item);
           let slotElm = slot[i].elm;