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

[refactor] 完成button、tag自定义组件改造 (#167)

Browse Source 
* btn、tag改造

* 完成button、tag改造
This commit is contained in:
zhaolong06 2018-03-26 11:31:40 +08:00 committed by Yao
parent d471681e8f
commit bde5732dc2
12 changed files with 99 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,6 @@
{
"navigationBarTitleText": "Button 按钮"
"navigationBarTitleText": "Button 按钮",
"usingComponents": {
"zan-button": "/dist/btn/index"
}
}

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

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

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

@ -1,3 +1,6 @@
{
"navigationBarTitleText": "Tag 标记"
"navigationBarTitleText": "Tag 标记",
"usingComponents": {
"zan-tag": "/dist/tag/index"
}
}

24
example/pages/tag/index.wxml
View File

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

2
example/pages/tag/index.wxss
View File

@ -1,3 +1,3 @@
.zan-tag + .zan-tag {
zan-tag + zan-tag {
margin-left: 10px;
}

22
packages/btn/index.js Normal file
View File

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

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

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

6
packages/btn/index.pcss
View File

@ -150,9 +150,5 @@
}
/* :last-child */
.zan-btn--last-child,
.zan-btn:last-child {
margin-bottom: 0;
margin-right: 0;
}

7
packages/btn/index.wxml Normal file
View File

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

15
packages/tag/index.js Normal file
View File

@ -0,0 +1,15 @@
Component({
properties: {
type: {
type: String,
},
plain: {
type: Boolean,
value: false,
},
disabled: {
type: Boolean,
value: false,
}
}
});

3
packages/tag/index.json Normal file
View File

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

6
packages/tag/index.wxml Normal file
View File

@ -0,0 +1,6 @@
<view
class="zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
>
<slot></slot>
</view>