按钮增加 group 类型 (#202)

example/pages/btn/index.json

@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Button 按钮",
   "usingComponents": {
-    "zan-button": "/dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/btn/index.wxml

@@ -1,56 +1,52 @@
-<view class="container">
+<doc-page title="BUTTON" without-padding>
 
-  <view class="doc-title zan-hairline--bottom">BUTTON</view>
+  <zan-panel title="普通按钮">
-
+    <zan-button-group>
-  <view class="zan-panel-title">普通按钮</view>
-  <view class="zan-panel">
-    <view class="zan-btns">
       <zan-button>取消订单</zan-button>
       <zan-button type="primary">确认付款</zan-button>
       <zan-button type="danger">确认付款</zan-button>
       <zan-button type="warn">确认付款</zan-button>
-    </view>
+    </zan-button-group>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
+  <zan-panel title="大号按钮，没有边框线及圆角">
-  <view class="zan-panel">
     <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>
+  </zan-panel>
 
-  <view class="zan-panel-title">小号按钮</view>
+  <zan-panel title="小号按钮">
-  <view class="zan-panel" style="padding: 15px;">
+    <zan-button-group>
       <zan-button size="small">取消订单</zan-button>
       <zan-button size="small" type="primary">确认付款</zan-button>
-  </view>
+    </zan-button-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">迷你按钮</view>
+  <zan-panel title="迷你按钮">
-  <view class="zan-panel" style="padding: 15px;">
+    <zan-button-group>
       <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>
+    </zan-button-group>
+  </zan-panel>
 
-  <view class="zan-panel-title">Loading</view>
+  <zan-panel title="Loading">
-  <view class="zan-panel">
+    <zan-button-group>
-    <view class="zan-btns">
       <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>
+    </zan-button-group>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">Disabled</view>
+  <zan-panel title="Disabled">
-  <view class="zan-panel">
+    <zan-button-group>
-    <view class="zan-btns">
       <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>
+    </zan-button-group>
-  </view>
+  </zan-panel>
 
-</view>
+</doc-page>

example/pages/dialog/index.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "doc-page": "../../components/doc-page/index",
     "zan-dialog": "../../dist/dialog/index",
-    "zan-button": "../../dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index"
   }  
 }

example/pages/dialog/index.wxml

@@ -1,38 +1,13 @@
 <doc-page title="DIALOG">
-  <view class="zan-btns" style="margin-top: 30vh;">
+  <zan-button-group style="margin-top: 30vh; display: block;">
     <zan-button bindtap="toggleBaseDialog">基础 Dialog</zan-button>
     <zan-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</zan-button>
     <zan-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</zan-button>
     <zan-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</zan-button>
-  </view>
+  </zan-button-group>
 
   <zan-dialog id="zan-base-dialog"></zan-dialog>
   <zan-dialog id="zan-no-title-dialog"></zan-dialog>
   <zan-dialog id="zan-button-dialog"></zan-dialog>
   <zan-dialog id="zan-vertical-dialog"></zan-dialog>
 </doc-page>
-
-<!-- <import src="/dist/dialog/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">DIALOG</view>
-
-  <view class="zan-btns" style="margin-top: 30vh;">
-    <button class="zan-btn" bindtap="toggleBaseDialog">
-      基础 Dialog
-    </button>
-    <button class="zan-btn" bindtap="toggleWithoutTitleDialog">
-      Dialog - 无标题
-    </button>
-    <button class="zan-btn" bindtap="toggleButtonDialog">
-      Dialog - 自定义显示按钮
-    </button>
-    <button class="zan-btn" bindtap="toggleVerticalDialog">
-      Dialog - 按钮纵向排布
-    </button>
-  </view>
-
-</view>
-
-<template is="zan-dialog" data="{{ zanDialog }}"></template> -->

example/pages/popup/index.json

@@ -3,7 +3,8 @@
   "usingComponents": {
     "doc-page": "../../components/doc-page/index",
     "zan-popup": "../../dist/popup/index",
-    "zan-button": "../../dist/btn/index"
+    "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index"
   }  
 }
 

example/pages/popup/index.wxml

@@ -1,5 +1,5 @@
 <doc-page title="POPUP">
-  <view class="zan-btns" style="margin-top: 10vh;">
+  <zan-button-group style="margin-top: 10vh;display: block;">
     <zan-button class="zan-btn" bind:btnclick="togglePopup">
       弹出popup
     </zan-button>
@@ -15,7 +15,7 @@
     <zan-button class="zan-btn" bind:btnclick="toggleRightPopup">
       从右边弹出popup
     </zan-button>
-  </view>
+  </zan-button-group>
 
   <!-- 中间弹出框 -->
   <zan-popup

example/pages/toast/index.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Toast 轻提示",
   "usingComponents": {
     "zan-button": "../../dist/btn/index",
+    "zan-button-group": "../../dist/btn-group/index",
     "zan-toast": "../../dist/toast/index"
   }
 }

example/pages/toast/index.wxml

@@ -4,7 +4,7 @@
 
   <view class="doc-title zan-hairline--bottom">TOAST</view>
 
-  <view class="zan-btns" style="margin-top: 15vh;">
+  <zan-button-group style="margin-top: 15vh;display: block;">
     <zan-button bind:btnclick="showToast">
       显示toast
     </zan-button>
@@ -28,7 +28,7 @@
     <zan-button bind:btnclick="showLoading">
       显示 Loading
     </zan-button>
-  </view>
+  </zan-button-group>
 </view>
 
 <!-- <template is="zan-toast" data="{{ zanToast }}"></template> -->

example/pages/toptips/index.wxml

@@ -1,17 +1,17 @@
 <doc-page title="TOPTIPS">
-  <view class="zan-btns" style="margin-top: 30vh;">
+  <view style="margin-top: 30vh;">
     <zan-button bind:btnclick="showTopTips">
       显示toptips，声明式调用
     </zan-button>
   </view>
 
-  <view class="zan-btns" style="margin-top: 30px;">
+  <view style="margin-top: 30px;">
     <zan-button bind:btnclick="showTopTips2">
       显示toptips，命令式调用
     </zan-button>
   </view>
 
-  <view class="zan-btns" style="margin-top: 30px;">
+  <view style="margin-top: 30px;">
     <zan-button bind:btnclick="showTopTips3">
       显示toptips，持续一秒
     </zan-button>

packages/btn-group/index.js

@@ -0,0 +1,28 @@
+Component({
+  relations: {
+    '../btn/index': {
+      type: 'child',
+      linked () {
+        updateBtnChild.call(this);
+      },
+      linkChange() {
+        updateBtnChild.call(this);
+      },
+      unlinked() {
+        updateBtnChild.call(this);
+      }
+    }
+  }
+});
+
+function updateBtnChild() {
+  let btns = this.getRelationNodes('../btn/index')
+    
+  if (btns.length > 0) {
+    let lastIndex = btns.length - 1
+
+    btns.forEach((btn, index) => {
+      btn.switchLastButtonStatus(index === lastIndex);
+    });
+  }
+}

packages/btn-group/index.json

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

packages/btn-group/index.wxml

@@ -0,0 +1,3 @@
+<view class="btn-group">
+  <slot></slot>
+</view>

packages/btn-group/index.wxss

@@ -0,0 +1,3 @@
+.btn-group {
+  margin: 15px;
+}

packages/btn/index.js

@@ -1,6 +1,17 @@
 
 Component({
   externalClasses: ['custom-class'],
+  relations: {
+    '../btn-group/index': {
+      type: 'parent',
+      linked() {
+        this.setData({ inGroup: true });
+      },
+      unlinked() {
+        this.setData({ inGroup: false });
+      }
+    }
+  },
   properties: {
     type: {
       type: String,
@@ -27,9 +38,19 @@ Component({
       value: ''
     }
   },
+
+  data: {
+    inGroup: false,
+    isLast: false
+  },
+
   methods: {
     handleTap() {
       this.triggerEvent('btnclick');
+    },
+
+    switchLastButtonStatus(isLast = false) {
+      this.setData({ isLast });
     }
   }
 });

packages/btn/index.pcss

@@ -4,7 +4,6 @@
   position: relative;
   color: #333;
   background-color: #fff;
-  margin-bottom: 10px;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 2px;
@@ -17,14 +16,16 @@
   vertical-align: middle;
   overflow: visible;
 }
+
+.zan-btn--group {
+  margin-bottom: 10px;
+}
+
 .zan-btn::after {
   @mixin hairline;
   border-width: 1px;
   border-radius: 4px;
 }
-.zan-btns {
-  margin: 15px;
-}
 
 /* type */
 .zan-btn--primary {
@@ -60,26 +61,36 @@
   height: 30px;
   line-height: 30px;
   font-size: 12px;
-  margin-right: 5px;
+  /* margin-right: 5px; */
-  margin-bottom: 0;
 }
+.zan-btn--small.zan-btn--group {
+  margin-bottom: 0;
+  margin-right: 5px;
+}
+
 .zan-btn--mini {
   display: inline-block;
   line-height: 21px;
   height: 22px;
   font-size: 10px;
-  margin-right: 5px;
+  /* margin-right: 5px; */
-  margin-bottom: 0;
   padding-left: 5px;
   padding-right: 5px;
 }
+.zan-btn--mini.zan-btn--group {
+  margin-bottom: 0;
+  margin-right: 5px;
+}
+
 .zan-btn--large {
   border-radius: 0;
-  margin-bottom: 0;
   border: none;
   line-height: 50px;
   height: 50px;
 }
+.zan-btn--large.zan-btn--group {
+  margin-bottom: 0;
+}
 
 /* plain */
 .zan-btn--plain.zan-btn {
@@ -151,5 +162,8 @@
 }
 
 /* :last-child */
-
+.zan-btn--group.zan-btn--last {
+  margin-bottom: 0;
+  margin-right: 0;
+}
 

packages/btn/index.wxml

@@ -1,5 +1,5 @@
 <button 
-  class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
   disabled="{{ disabled }}"
   open-type="{{ openType }}"
   bindtap="handleTap"