[refactor] steps:升级为自定义组件 (#192)

example/pages/steps/index.json

@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Steps 步骤条"
+  "navigationBarTitleText": "Steps 步骤条",
+  "usingComponents": {
+    "zan-steps": "../../dist/steps/index"
+  }
 }

example/pages/steps/index.wxml

@@ -7,19 +7,19 @@
   <view class="zan-panel">
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
+        <zan-steps type="horizon" steps="{{steps}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
+        <zan-steps type="horizon" steps="{{steps2}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell zan-cell--last-child">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
+        <zan-steps type="horizon" steps="{{steps3}}"></zan-steps>
       </view>
     </view>
   </view>
@@ -28,19 +28,19 @@
   <view class="zan-panel">
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
+        <zan-steps type="horizon" hasDesc steps="{{steps}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
+        <zan-steps type="horizon" hasDesc steps="{{steps2}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell zan-cell--last-child">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
+        <zan-steps type="horizon" hasDesc steps="{{steps3}}"></zan-steps>
       </view>
     </view>
   </view>
@@ -49,13 +49,13 @@
   <view class="zan-panel">
     <view class="zan-cell zan-cell">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
+        <zan-steps type="vertical" hasDesc steps="{{steps}}"></zan-steps>
       </view>
     </view>
 
     <view class="zan-cell zan-cell--last-child">
       <view class="zan-cell__bd">
-        <template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
+        <zan-steps type="vertical" steps="{{steps}}"></zan-steps>
       </view>
     </view>
   </view>
@@ -63,7 +63,7 @@
   <view class="zan-panel-title">可自定义class</view>
   <view class="zan-panel">
     <view class="zan-cell__bd">
-      <template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
+      <zan-steps type="vertical" steps="{{steps}}" className="my-class"></zan-steps>
     </view>
   </view>
 

packages/steps/README.md

@@ -6,15 +6,18 @@
 @import "path/to/zanui-weapp/dist/index.wxss";
 ```
 
-在需要使用的页面里引入组件库模板和脚本
+在 index.json 中引入组件
-```html
+```json
-<import src="path/to/zanui-weapp/dist/steps/index.wxml" />
+{
-```
+  "usingComponents": {
+    "zan-steps": "path/to/zanui-weapp/dist/steps/index"
+  }
+}
 
 ### 代码演示
 在模板中使用 zan-steps 模板，并传入相应数据
 ```html
-<template is="zan-steps" data="{{ type: 'horizon', steps }}"></template>
+<zan-steps type="horizon" steps="{{steps}}"></zan-steps>
 ```
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|

packages/steps/index.js

@@ -0,0 +1,20 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'horizon'
+    },
+
+    hasDesc: {
+      type: Boolean,
+      value: false
+    },
+
+    steps: { // 必须
+      type: Array,
+      value: []
+    },
+
+    className: String
+  }
+})

packages/steps/index.json

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

packages/steps/index.wxml

@@ -1,5 +1,4 @@
-<template name="zan-steps">
+<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
-  <view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
   <view
     wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
     class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
@@ -11,5 +10,4 @@
     </view>
     <view class="zan-steps__line"></view>
   </view>
-  </view>
+</view>
-</template>