From bde5732dc2612962c948bc23c8b970bb60c71eb0 Mon Sep 17 00:00:00 2001
From: zhaolong06 <zhaolong06@users.noreply.github.com>
Date: Mon, 26 Mar 2018 11:31:40 +0800
Subject: [PATCH] =?UTF-8?q?[refactor]=20=E5=AE=8C=E6=88=90button=E3=80=81t?=
 =?UTF-8?q?ag=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0=20(#167)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* btn、tag改造

* 完成button、tag改造
---
 example/pages/btn/index.json |  5 ++++-
 example/pages/btn/index.wxml | 42 ++++++++++++++++++------------------
 example/pages/tag/index.json |  5 ++++-
 example/pages/tag/index.wxml | 24 ++++++++++-----------
 example/pages/tag/index.wxss |  2 +-
 packages/btn/index.js        | 22 +++++++++++++++++++
 packages/btn/index.json      |  3 +++
 packages/btn/index.pcss      |  6 +-----
 packages/btn/index.wxml      |  7 ++++++
 packages/tag/index.js        | 15 +++++++++++++
 packages/tag/index.json      |  3 +++
 packages/tag/index.wxml      |  6 ++++++
 12 files changed, 99 insertions(+), 41 deletions(-)
 create mode 100644 packages/btn/index.js
 create mode 100644 packages/btn/index.json
 create mode 100644 packages/btn/index.wxml
 create mode 100644 packages/tag/index.js
 create mode 100644 packages/tag/index.json
 create mode 100644 packages/tag/index.wxml

diff --git a/example/pages/btn/index.json b/example/pages/btn/index.json
index b92ec995..30791fdc 100644
--- a/example/pages/btn/index.json
+++ b/example/pages/btn/index.json
@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Button 按钮"
+  "navigationBarTitleText": "Button 按钮",
+  "usingComponents": {
+    "zan-button": "/dist/btn/index"
+  }
 }
diff --git a/example/pages/btn/index.wxml b/example/pages/btn/index.wxml
index 7eb0aa96..b4e65e14 100644
--- a/example/pages/btn/index.wxml
+++ b/example/pages/btn/index.wxml
@@ -5,51 +5,51 @@
   <view class="zan-panel-title">普通按钮</view>
   <view class="zan-panel">
     <view class="zan-btns">
-      <button class="zan-btn">取消订单</button>
-      <button class="zan-btn zan-btn--primary">确认付款</button>
-      <button class="zan-btn zan-btn--danger">确认付款</button>
-      <button class="zan-btn zan-btn--warn">确认付款</button>
+      <zan-button>取消订单</zan-button>
+      <zan-button type="primary">确认付款</zan-button>
+      <zan-button type="danger">确认付款</zan-button>
+      <zan-button type="warn">确认付款</zan-button>
     </view>
   </view>
 
   <view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
   <view class="zan-panel">
-    <button class="zan-btn zan-btn--large zan-btn--primary">确认付款</button>
-    <button class="zan-btn zan-btn--large zan-btn--warn">立即购买</button>
-    <button class="zan-btn zan-btn--large zan-btn--danger">立即购买</button>
+    <zan-button size="large" type="primary">确认付款</zan-button>
+    <zan-button size="large" type="warn">立即购买</zan-button>
+    <zan-button size="large" type="danger">立即购买</zan-button>
   </view>
 
   <view class="zan-panel-title">小号按钮</view>
   <view class="zan-panel" style="padding: 15px;">
-    <button class="zan-btn zan-btn--small">取消订单</button>
-    <button class="zan-btn zan-btn--small zan-btn--primary">确认付款</button>
+    <zan-button size="small">取消订单</zan-button>
+    <zan-button size="small" type="primary">确认付款</zan-button>
   </view>
 
   <view class="zan-panel-title">迷你按钮</view>
   <view class="zan-panel" style="padding: 15px;">
-    <button class="zan-btn zan-btn--mini zan-btn--plain">取消订单</button>
-    <button class="zan-btn zan-btn--mini zan-btn--primary zan-btn--plain">确认付款</button>
-    <button class="zan-btn zan-btn--mini zan-btn--warn zan-btn--plain">确认付款</button>
-    <button class="zan-btn zan-btn--mini zan-btn--danger zan-btn--plain">确认付款</button>
+    <zan-button size="mini">取消订单</zan-button>
+    <zan-button size="mini" type="primary">确认付款</zan-button>
+    <zan-button size="mini" type="warn">确认付款</zan-button>
+    <zan-button size="mini" type="danger">确认付款</zan-button>
   </view>
 
   <view class="zan-panel-title">Loading</view>
   <view class="zan-panel">
     <view class="zan-btns">
-      <button class="zan-btn zan-btn--loading">取消订单</button>
-      <button class="zan-btn zan-btn--loading zan-btn--primary">确认付款</button>
-      <button class="zan-btn zan-btn--loading zan-btn--danger">确认付款</button>
-      <button class="zan-btn zan-btn--loading zan-btn--warn">确认付款</button>
+      <zan-button loading>取消订单</zan-button>
+      <zan-button loading type="primary">确认付款</zan-button>
+      <zan-button loading type="danger">确认付款</zan-button>
+      <zan-button loading type="warn">确认付款</zan-button>
     </view>
   </view>
 
   <view class="zan-panel-title">Disabled</view>
   <view class="zan-panel">
     <view class="zan-btns">
-      <button class="zan-btn zan-btn--disabled" disabled>取消订单</button>
-      <button class="zan-btn zan-btn--disabled zan-btn--primary" disabled>确认付款</button>
-      <button class="zan-btn zan-btn--disabled zan-btn--danger" disabled>确认付款</button>
-      <button class="zan-btn zan-btn--disabled zan-btn--warn" disabled>确认付款</button>
+      <zan-button disabled>取消订单</zan-button>
+      <zan-button disabled type="primary">确认付款</zan-button>
+      <zan-button disabled type="danger">确认付款</zan-button>
+      <zan-button disabled type="warn">确认付款</zan-button>
     </view>
   </view>
 
diff --git a/example/pages/tag/index.json b/example/pages/tag/index.json
index b1ca9e22..dede9488 100644
--- a/example/pages/tag/index.json
+++ b/example/pages/tag/index.json
@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Tag 标记"
+  "navigationBarTitleText": "Tag 标记",
+  "usingComponents": {
+    "zan-tag": "/dist/tag/index"
+  }
 }
diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml
index 4c345342..f8a23d57 100644
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@@ -4,27 +4,27 @@
 
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-tag">灰色</view>
-      <view class="zan-tag zan-tag--danger">红色</view>
-      <view class="zan-tag zan-tag--disabled">不可用</view>
+      <zan-tag>灰色</zan-tag>
+      <zan-tag type="danger">红色</zan-tag>
+      <zan-tag disabled>不可用</zan-tag>
     </view>
   </view>
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-tag zan-tag--danger">会员折扣</view>
-      <view class="zan-tag zan-tag--warn">返现</view>
-      <view class="zan-tag zan-tag--primary">返现</view>
-      <view class="zan-tag zan-tag--primary zan-tag--disabled">不可用</view>
+      <zan-tag type="danger">会员折扣</zan-tag>
+      <zan-tag type="warn">返现</zan-tag>
+      <zan-tag type="primary">返现</zan-tag>
+      <zan-tag type="primary" disabled>不可用</zan-tag>
     </view>
   </view>
 
     <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-tag zan-tag--plain">灰色</view>
-      <view class="zan-tag zan-tag--danger zan-tag--plain">会员折扣</view>
-      <view class="zan-tag zan-tag--warn zan-tag--plain">返现</view>
-      <view class="zan-tag zan-tag--primary zan-tag--plain">返现</view>
-      <view class="zan-tag zan-tag--primary zan-tag--plain zan-tag--disabled">返现不可用</view>
+      <zan-tag plain>灰色</zan-tag>
+      <zan-tag type="danger" plain>会员折扣</zan-tag>
+      <zan-tag type="warn" plain>返现</zan-tag>
+      <zan-tag type="primary" plain>返现</zan-tag>
+      <zan-tag type="primary" plain disabled>返现不可用</zan-tag>
     </view>
   </view>
 </view>
diff --git a/example/pages/tag/index.wxss b/example/pages/tag/index.wxss
index 9f37366d..e0876953 100644
--- a/example/pages/tag/index.wxss
+++ b/example/pages/tag/index.wxss
@@ -1,3 +1,3 @@
-.zan-tag + .zan-tag {
+zan-tag + zan-tag {
   margin-left: 10px;
 }
diff --git a/packages/btn/index.js b/packages/btn/index.js
new file mode 100644
index 00000000..079cb51c
--- /dev/null
+++ b/packages/btn/index.js
@@ -0,0 +1,22 @@
+
+Component({
+  externalClasses: ['custom-class'],
+  properties: {
+    type: {
+      type: String,
+      value: '',
+    },
+    size: {
+      type: String,
+      value: '',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});
\ No newline at end of file
diff --git a/packages/btn/index.json b/packages/btn/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/btn/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/packages/btn/index.pcss b/packages/btn/index.pcss
index 034051ad..7fc54a73 100644
--- a/packages/btn/index.pcss
+++ b/packages/btn/index.pcss
@@ -150,9 +150,5 @@
 }
 
 /* :last-child */
-.zan-btn--last-child,
-.zan-btn:last-child {
-  margin-bottom: 0;
-  margin-right: 0;
-}
+
 
diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml
new file mode 100644
index 00000000..f2bbf97d
--- /dev/null
+++ b/packages/btn/index.wxml
@@ -0,0 +1,7 @@
+
+<button 
+  class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  disabled="{{disabled}}"
+>
+  <slot></slot>
+</button>
\ No newline at end of file
diff --git a/packages/tag/index.js b/packages/tag/index.js
new file mode 100644
index 00000000..9f1bcbd2
--- /dev/null
+++ b/packages/tag/index.js
@@ -0,0 +1,15 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+    },
+    plain: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    }
+  }
+});
\ No newline at end of file
diff --git a/packages/tag/index.json b/packages/tag/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/tag/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml
new file mode 100644
index 00000000..194034d9
--- /dev/null
+++ b/packages/tag/index.wxml
@@ -0,0 +1,6 @@
+
+<view 
+  class="zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
+>
+  <slot></slot>
+</view>
\ No newline at end of file