blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

按钮增加 group 类型 (#202)

Browse Source
This commit is contained in:
Yao 2018-04-26 23:30:03 +08:00 committed by GitHub
parent deb25db58c
commit 77f8e724b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 131 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/pages/btn/index.json
View File

@ -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"
}
}

64
example/pages/btn/index.wxml
View File

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

3
example/pages/dialog/index.json
View File

@ -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"
}
}

29
example/pages/dialog/index.wxml
View File

@ -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> -->

3
example/pages/popup/index.json
View File

@ -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"
}
}

4
example/pages/popup/index.wxml
View File

@ -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

1
example/pages/toast/index.json
View File

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

4
example/pages/toast/index.wxml
View File

@ -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> -->

6
example/pages/toptips/index.wxml
View File

@ -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>

28
packages/btn-group/index.js Normal file
View File

@ -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);
});
}
}

3
packages/btn-group/index.json Normal file
View File

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

3
packages/btn-group/index.wxml Normal file
View File

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

3
packages/btn-group/index.wxss Normal file
View File

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

21
packages/btn/index.js
View File

@ -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 });
}
}
});

34
packages/btn/index.pcss
View File

@ -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-bottom: 0;
/* margin-right: 5px; */
}
.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-bottom: 0;
/* margin-right: 5px; */
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;
}

2
packages/btn/index.wxml
View File

@ -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"