[refactor] Tab：升级到自定义组件 (#161)

* [improvement] Tab：升级到自定义组件

* fix: 去除冗余example代码

* [refactor] 重构badge为自定义组件 (#160)

* fix: 去除tab组件使用对象入参方式，修改example用例

example/pages/tab/index.js

@@ -1,6 +1,7 @@
-const { Tab, extend } = require('../../dist/index');
+const interval = 50;
+let moduleId = 1;
 
-Page(extend({}, Tab, {
+Page({
   data: {
     tab1: {
       list: [{
@@ -43,7 +44,7 @@ Page(extend({}, Tab, {
       }],
       selectedId: '1',
       scroll: true,
-      height: 45
+      height: 80
     },
     tab3: {
       list: [{
@@ -66,17 +67,9 @@ Page(extend({}, Tab, {
         title: '商品6'
       }],
       selectedId: '1',
+      height: 45,
       scroll: true,
-      height: 45
+      fixed: true
     }
-  },
-
-  handleZanTabChange(e) {
-    var componentId = e.componentId;
-    var selectedId = e.selectedId;
-
-    this.setData({
-      [`${componentId}.selectedId`]: selectedId
-    });
   }
-}));
+});

example/pages/tab/index.json

@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Tab 标签"
+  "navigationBarTitleText": "Tab 标签",
+  "usingComponents": {
+    "zan-tab": "../../dist/tab/index"
+  }
 }

example/pages/tab/index.wxml

@@ -5,18 +5,26 @@
   <view class="doc-title zan-hairline--bottom">TAB</view>
 
   <view style="margin: 20px 0">
-    <template
-      is="zan-tab"
-      data="{{ ...tab1, componentId: 'tab1' }}"></template>
+    <zan-tab
+      list="{{ tab1.list }}"
+      selected-id="{{ tab1.selectedId }}"
+    />
   </view>
   <view style="margin: 20px 0">
-    <template
-      is="zan-tab"
-      data="{{ ...tab2, componentId: 'tab2' }}"></template>
+    <zan-tab
+      list="{{ tab2.list }}"
+      selected-id="{{ tab2.selectedId }}"
+      scroll="{{ tab2.scroll }}"
+      height="{{ tab2.height }}"
+    />
   </view>
   <view style="margin: 20px 0">
-    <template
-      is="zan-tab"
-      data="{{ ...tab3, componentId: 'tab3' }}"></template>
+    <zan-tab
+      list="{{ tab3.list }}"
+      selected-id="{{ tab3.selectedId }}"
+      scroll="{{ tab3.scroll }}"
+      fixed="{{ tab3.fixed }}"
+      height="{{ tab3.height }}"
+    />
   </view>
 </view>

example/pages/tab/index.wxss

@@ -0,0 +1,3 @@
+.doc-title {
+  margin-top: 50px;
+}

packages/tab/README.md

@@ -1,37 +1,46 @@
 ## Tab 标签
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
-```
-
-在需要使用的页面里引入组件库模板和脚本
-```html
-<import src="path/to/zanui-weapp/dist/tab/index.wxml" />
-```
-```js
-const { extend, Tab } = require('path/to/zanui-weapp/dist/index');
-
-// 在 Page 中混入 Tab 里面声明的方法
-Page(extend({}, Tab, {
-  // ...
-}));
+在 index.json 中引入组件
+```json
+{
+  "usingComponents": {
+    "zan-tab": "path/to/zanui-weapp/dist/icon/index"
+  }
+}
+// 在 Page 中声明 Tab 依赖的展示数据
+Page({
+  data: {
+    list: [{
+      id: 'xxx',
+      title: 'xxx'
+    }],
+    selectedId: 'xxx',
+    ...
+  }
+})
 ```
 
 ### 代码演示
-在模板中使用 zan-tab 模板，并传入相应数据
+可以在任意位置上使用 zan-tab 标签。传入对应的数据即可。
 ```html
-<template is="zan-tab" data="{{ tab: { list, selectedId, scroll, height }, componentId: 'tab1' }}"></template>
+<zan-tab
+  scroll="{{ scroll }}"
+  list="{{ list }}"
+  selected-id="{{ selectedId }}"
+  height="{{ height }}"
+  fixed="{{ fixed }}"
+  bindtabchange="handleTabChange"
+/>
 ```
 
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
-| tab | tab 配置对象 | Object | - | |
 | tab.scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
 | tab.list | 可选项列表 | Array | - | |
 | tab.selectedId | 选中id | - | - | |
 | tab.height | tab高度 | Number | - | |
+| tab.fixed | 是否固定位置 | Boolean | - | |
 | componentId | 用于区分页面多个 tab 组件 | String | - | |
 
 
@@ -57,12 +66,10 @@ tab 组件中，tab.list 数据格式如下
 }]
 ```
 
-当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
+可以监听 bindtabchange 事件回调，在页面注册回调函数
 ```js
-Page(extend({}, Tab, {
-  handleZanTabChange({ componentId, selectedId }) {
-    // componentId 即为在模板中传入的 componentId
-    // 用于在一个页面上使用多个 tab 时，进行区分
+Page({
+  customCallback(selectedId) {
     // selectId 表示被选中 tab 项的 id
   }
 }));

packages/tab/index.js

@@ -1,19 +1,58 @@
-const { extractComponentId } = require('../common/helper');
+Component({
+  externalClasses: 'class',
 
-var Tab = {
-  _handleZanTabChange(e) {
-    const componentId = extractComponentId(e);
-    const dataset = e.currentTarget.dataset;
-    const selectedId = dataset.itemId;
-    const data = { componentId, selectedId };
+  properties: {
+    scroll: {
+      type: Boolean,
+      value: false
+    },
+    fixed: {
+      type: Boolean,
+      value: false
+    },
+    height: {
+      type: Number,
+      value: 0
+    },
+    list: {
+      type: Array,
+      value: []
+    },
+    selectedId: {
+      type: [String, Number],
+      value: '',
+      observer(newVal) {
+        this.setData({
+          currentTab: newVal
+        });
+      }
+    },
+    componentId: {
+      type: String,
+      default: ''
+    }
+  },
 
-    console.info('[zan:tab:change]', data);
-    if (this.handleZanTabChange) {
-      this.handleZanTabChange(data);
-    } else {
-      console.warn('页面缺少 handleZanTabChange 回调函数');
+  data: {
+    currentTab: ''
+  },
+
+  attached() {
+    this.setData({
+      currentTab: this.data.selectedId
+    });
+  },
+
+  methods: {
+    _handleZanTabChange(e) {
+      const selectedId = e.currentTarget.dataset.itemId;
+
+      this.setData({
+        currentTab: selectedId
+      });
+
+      console.info('[zan:tab:change] selectedId:', selectedId);
+      this.triggerEvent('tabchange', selectedId);
     }
   }
-};
-
-module.exports = Tab;
+})

packages/tab/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/tab/index.wxml

@@ -1,37 +1,47 @@
-<template name="zan-tab">
-  <view class="zan-tab">
-    <block wx:if="{{ tab.scroll || scroll }}">
-      <scroll-view
-        class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
-        scroll-x="true"
-        style="height: {{ tab.height || height ? ((tab.height || height) + 'px') : 'auto' }}"
-      >
-        <template
-          is="zan-tab-list"
-          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
-        </template>
-      </scroll-view>
-    </block>
-    <block wx:else>
-      <view class="zan-tab__bd {{ fixed ? 'zan-tab__bd--fixed' : '' }}">
-        <template
-          is="zan-tab-list"
-          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
-        </template>
-      </view>
-    </block>
-  </view>
-</template>
+<view
+  class="zan-tab"
+  style="{{ height ? 'height:' + height + 'px' : '' }}"
+>
+  <block wx:if="{{ scroll }}">
+    <scroll-view
+      class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
+      scroll-x="true"
+      style="height: {{ height ? height + 'px' : 'auto' }}"
+    >
+      <template
+        is="zan-tab-list"
+        data="{{ list, currentTab, height }}"
+      />
+    </scroll-view>
+  </block>
+  <block wx:else>
+    <view
+      class="zan-tab__bd {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
+      style="height: {{ height ? height + 'px' : 'auto' }}"
+    >
+      <template
+        is="zan-tab-list"
+        data="{{ list, currentTab, height }}"
+      />
+    </view>
+  </block>
+</view>
+<!-- 插入内容 -->
+<slot></slot>
 
 <template name="zan-tab-list">
   <view
     wx:for="{{ list }}"
     wx:key="id"
-    class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
-    data-component-id="{{ componentId }}"
+    class="zan-tab__item {{ currentTab == item.id ? 'zan-tab__item--selected' : '' }}"
     data-item-id="{{ item.id }}"
     bindtap="_handleZanTabChange"
   >
-    <view class="zan-tab__title">{{ item.title }}</view>
+    <view
+      class="zan-tab__title"
+      style="{{ height ? 'height:' + height + 'px;line-height:' + height + 'px' : '' }}"
+    >
+      {{ item.title }}
+    </view>
   </view>
 </template>