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

[breaking change] Button: rewrite

Browse Source
This commit is contained in:
陈嘉涵 2018-07-30 13:50:31 +08:00
parent 2f6ec315cb
commit 9f420f4b79
33 changed files with 403 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
dist/btn-group/index.js vendored
View File

@ -1,30 +0,0 @@
'use strict';
Component({
relations: {
'../button/index': {
type: 'child',
linked: function linked() {
updateBtnChild.call(this);
},
linkChange: function linkChange() {
updateBtnChild.call(this);
},
unlinked: function unlinked() {
updateBtnChild.call(this);
}
}
}
});
function updateBtnChild() {
var buttons = this.getRelationNodes('../button/index');
if (buttons.length > 0) {
var lastIndex = buttons.length - 1;
buttons.forEach(function (button, index) {
button.switchLastButtonStatus(index === lastIndex);
});
}
}

3
dist/btn-group/index.wxml vendored
View File

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

3
dist/btn-group/index.wxss vendored
View File

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

11
example/app.wxss
View File

@ -5,7 +5,16 @@ page {
background: #f8f8f8; background: #f8f8f8;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
padding: 15rpx 0; padding: 0 0 100rpx;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
} }
.demo-margin-right {
margin-right: 15px;
}
.demo-margin-bottom {
display: block;
margin-bottom: 15px;
}

5
example/components/demo-block/index.js Normal file
View File

@ -0,0 +1,5 @@
Component({
properties: {
title: String
}
});

0
dist/btn-group/index.json → example/components/demo-block/index.json
View File

4
example/components/demo-block/index.wxml Normal file
View File

@ -0,0 +1,4 @@
<view class="demo-block">
<view wx:if="{{ title }}" class="demo-block__title">{{ title }}</view>
<slot />
</view>

11
example/components/demo-block/index.wxss Normal file
View File

@ -0,0 +1,11 @@
.demo-block {
padding: 0 15px;
}
.demo-block__title {
margin: 0;
font-weight: 400;
font-size: 14px;
color: rgba(69,90,100,.6);
padding: 20px 0 15px;
}

16
example/pages/button/index.js
View File

@ -1,15 +1 @@
Page({ Page({});
data: {
},
onLoad() {
},
onShow() {
},
getPhoneNumber(e) {
console.log(e);
}
});

2
example/pages/button/index.json
View File

@ -1,8 +1,8 @@
{ {
"navigationBarTitleText": "Button 按钮", "navigationBarTitleText": "Button 按钮",
"usingComponents": { "usingComponents": {
"demo-block": "../../components/demo-block/index",
"van-button": "../../dist/button/index", "van-button": "../../dist/button/index",
"van-button-group": "../../dist/button-group/index",
"van-panel": "../../dist/panel/index" "van-panel": "../../dist/panel/index"
} }
} }

72
example/pages/button/index.wxml
View File

@ -1,51 +1,29 @@
<van-panel title="普通按钮"> <demo-section>
<van-button-group> <demo-block title="按钮类型">
<van-button <van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
open-type="getPhoneNumber" <van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
bind:getphonenumber="getPhoneNumber" <van-button type="danger">危险按钮</van-button>
>获取电话</van-button> </demo-block>
<van-button type="primary">确认付款</van-button>
<van-button type="danger">确认付款</van-button>
<van-button type="warn">确认付款</van-button>
</van-button-group>
</van-panel>
<van-panel title="大号按钮，没有边框线及圆角"> <demo-block title="朴素按钮">
<van-button size="large" type="primary">确认付款</van-button> <van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
<van-button size="large" type="warn">立即购买</van-button> <van-button type="primary" plain custom-class="demo-margin-right">主要按钮</van-button>
<van-button size="large" type="danger">立即购买</van-button> <van-button type="danger" plain>危险按钮</van-button>
</van-panel> </demo-block>
<van-panel title="小号按钮"> <demo-block title="按钮尺寸">
<van-button-group> <van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
<van-button size="small">取消订单</van-button> <van-button size="normal" class="demo-margin-right">普通按钮</van-button>
<van-button size="small" type="primary">确认付款</van-button> <van-button size="small" class="demo-margin-right">小型按钮</van-button>
</van-button-group> <van-button size="mini">迷你按钮</van-button>
</van-panel> </demo-block>
<van-panel title="迷你按钮"> <demo-block title="禁用状态">
<van-button-group> <van-button disabled>禁用状态</van-button>
<van-button size="mini">取消订单</van-button> </demo-block>
<van-button size="mini" type="primary">确认付款</van-button>
<van-button size="mini" type="warn">确认付款</van-button>
<van-button size="mini" type="danger">确认付款</van-button>
</van-button-group>
</van-panel>
<van-panel title="Loading"> <demo-block title="加载状态">
<van-button-group> <van-button loading custom-class="demo-margin-right" />
<van-button loading>取消订单</van-button> <van-button loading type="primary" />
<van-button loading type="primary">确认付款</van-button> </demo-block>
<van-button loading type="danger">确认付款</van-button> </demo-section>
<van-button loading type="warn">确认付款</van-button>
</van-button-group>
</van-panel>
<van-panel title="Disabled">
<van-button-group>
<van-button disabled>取消订单</van-button>
<van-button disabled type="primary">确认付款</van-button>
<van-button disabled type="danger">确认付款</van-button>
<van-button disabled type="warn">确认付款</van-button>
</van-button-group>
</van-panel>

0
example/pages/button/index.wxss Normal file
View File

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

@ -3,7 +3,6 @@
"usingComponents": { "usingComponents": {
"van-dialog": "../../dist/dialog/index", "van-dialog": "../../dist/dialog/index",
"van-button": "../../dist/button/index", "van-button": "../../dist/button/index",
"van-button-group": "../../dist/button-group/index",
"van-toast": "../../dist/toast/index" "van-toast": "../../dist/toast/index"
} }
} }

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

@ -1,11 +1,11 @@
<van-button-group style="margin-top: 30vh; display: block;">
<van-button bindtap="toggleBaseDialog">基础 Dialog</van-button> <van-button bindtap="toggleBaseDialog">基础 Dialog</van-button>
<van-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</van-button> <van-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</van-button>
<van-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</van-button> <van-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</van-button>
<van-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</van-button> <van-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</van-button>
<van-button bindtap="toggleOpenDialog">Dialog - 获取 Open 数据的弹窗</van-button> <van-button bindtap="toggleOpenDialog">Dialog - 获取 Open 数据的弹窗</van-button>
<van-button bindtap="toggleCloseDialog">Dialog - 控制弹窗关闭</van-button> <van-button bindtap="toggleCloseDialog">Dialog - 控制弹窗关闭</van-button>
</van-button-group>
<van-dialog id="van-base-dialog"></van-dialog> <van-dialog id="van-base-dialog"></van-dialog>
<van-dialog id="van-no-title-dialog"></van-dialog> <van-dialog id="van-no-title-dialog"></van-dialog>

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

@ -2,7 +2,6 @@
"navigationBarTitleText": "Field 输入框", "navigationBarTitleText": "Field 输入框",
"usingComponents": { "usingComponents": {
"van-button": "../../dist/button/index", "van-button": "../../dist/button/index",
"van-button-group": "../../dist/button-group/index",
"van-cell-group": "../../dist/cell-group/index", "van-cell-group": "../../dist/cell-group/index",
"van-field": "../../dist/field/index", "van-field": "../../dist/field/index",
"van-panel": "../../dist/panel/index" "van-panel": "../../dist/panel/index"

8
example/pages/field/index.wxml
View File

@ -31,9 +31,7 @@
</van-cell-group> </van-cell-group>
</van-panel> </van-panel>
<van-button-group> <van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
<van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
</van-button-group>
<!-- 去除标题后的输入框样式 --> <!-- 去除标题后的输入框样式 -->
<van-panel title="无标题输入框"> <van-panel title="无标题输入框">
@ -44,9 +42,7 @@
</van-field> </van-field>
</van-panel> </van-panel>
<van-button-group> <van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
<van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
</van-button-group>
<!-- 使用 Field 圆角样式 --> <!-- 使用 Field 圆角样式 -->
<van-panel title="圆角输入框"> <van-panel title="圆角输入框">

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

@ -2,8 +2,7 @@
"navigationBarTitleText": "Popup 弹出层", "navigationBarTitleText": "Popup 弹出层",
"usingComponents": { "usingComponents": {
"van-popup": "../../dist/popup/index", "van-popup": "../../dist/popup/index",
"van-button": "../../dist/button/index", "van-button": "../../dist/button/index"
"van-button-group": "../../dist/button-group/index"
} }
} }

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

@ -1,20 +1,18 @@
<van-button-group style="margin-top: 10vh;display: block;"> <van-button class="van-button" bind:buttonclick="togglePopup">
<van-button class="van-button" bind:buttonclick="togglePopup">
弹出popup 弹出popup
</van-button> </van-button>
<van-button class="van-button" bind:buttonclick="toggleTopPopup"> <van-button class="van-button" bind:buttonclick="toggleTopPopup">
从顶部弹出popup 从顶部弹出popup
</van-button> </van-button>
<van-button class="van-button" bind:buttonclick="toggleBottomPopup"> <van-button class="van-button" bind:buttonclick="toggleBottomPopup">
从底部弹出popup 从底部弹出popup
</van-button> </van-button>
<van-button class="van-button" bind:buttonclick="toggleLeftPopup"> <van-button class="van-button" bind:buttonclick="toggleLeftPopup">
从左边弹出popup 从左边弹出popup
</van-button> </van-button>
<van-button class="van-button" bind:buttonclick="toggleRightPopup"> <van-button class="van-button" bind:buttonclick="toggleRightPopup">
从右边弹出popup 从右边弹出popup
</van-button> </van-button>
</van-button-group>
<!-- 中间弹出框 --> <!-- 中间弹出框 -->
<van-popup <van-popup

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

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

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

@ -1,8 +1,6 @@
<import src="/dist/toast/index.wxml" /> <import src="/dist/toast/index.wxml" />
<view class="container"> <view class="container">
<van-button-group style="margin-top: 15vh;display: block;">
<van-button bind:buttonclick="showToast"> <van-button bind:buttonclick="showToast">
显示toast 显示toast
</van-button> </van-button>
@ -30,7 +28,6 @@
<van-button bind:buttonclick="showLoading"> <van-button bind:buttonclick="showLoading">
显示 Loading 显示 Loading
</van-button> </van-button>
</van-button-group>
</view> </view>
<!-- <template is="van-toast" data="{{ zanToast }}"></template> --> <!-- <template is="van-toast" data="{{ zanToast }}"></template> -->

28
packages/button-group/index.js
View File

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

3
packages/button-group/index.json
View File

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

3
packages/button-group/index.wxml
View File

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

3
packages/button-group/index.wxss
View File

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

115
packages/button/README.md
View File

@ -10,89 +10,74 @@
### 代码演示 ### 代码演示
#### 基础用法
```html
<van-button>取消订单</van-button>
```
#### 按钮类型 #### 按钮类型
按钮支持额外的三种类型 primary, danger, warn 支持`default`、`primary`、`danger`三种类型，默认为`default`
```html ```html
<van-button type="primary">确认付款</van-button> <van-button type="default">默认按钮</van-button>
<van-button type="danger">确认付款</van-button> <van-button type="primary">主要按钮</van-button>
<van-button type="warn">确认付款</van-button> <van-button type="danger">危险按钮</van-button>
``` ```
#### 按钮大小 #### 朴素按钮
按钮支持额外三种大小 large, small, mini
```html ```html
<van-button size="large">确认付款</van-button> <van-button type="default" plain>默认按钮</van-button>
<van-button size="small">取消订单</van-button> <van-button type="primary" plain>主要按钮</van-button>
<van-button size="mini">确认付款</van-button> <van-button type="danger" plain>危险按钮</van-button>
``` ```
#### 其他 #### 按钮尺寸
按钮镂空状态 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html ```html
<van-button plain>确认付款</van-button> <van-button size="large">大号按钮</van-button>
<van-button size="normal">普通按钮</van-button>
<van-button size="small">小型按钮</van-button>
<van-button size="mini">迷你按钮</van-button>
``` ```
按钮加载状态 #### 禁用状态
通过`disabled`属性来禁用按钮，此时按钮不可点击
```html ```html
<van-button loading>确认付款</van-button> <van-button disabled>禁用状态</van-button>
``` ```
按钮禁用状态 #### 加载状态
```html ```html
<van-button disabled>确认付款</van-button> <van-button loading />
<van-button loading type="primary" />
``` ```
### 配合 button-group 使用
通过配合 van-button-group 使用，可以让按钮之间自动有合适的间距出现，使用方式如下
1.在 json 文件中配置 button-group 组件
```json
"usingComponents": {
"van-button": "path/to/vant-weapp/dist/button/index",
"van-button-group": "path/to/vant-weapp/dist/button-group/index"
}
```
2.在 wxml 中直接引入
```html
<van-button-group>
<van-button>确认付款</van-button>
<van-button>再考虑下</van-button>
</van-button-group>
```
![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png)
### 属性 ### 属性
| 名称 | 类型 | 是否必须 | 默认 | 描述 | | 参数 | 说明 | 类型 | 默认值 |
|---------|---------|----------|------|-------| |-----------|-----------|-----------|-------------|
| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger | | type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
| size | String | 否 | 空 | 按钮大小，值有large、small、mini | | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
| plain | Boolean | 否 | false | 按钮是否镂空，默认为false | | plain | 是否为朴素按钮 | `Boolean` | `false` |
| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false | | disabled | 是否禁用 | `Boolean` | `false` |
| loading | Boolean | 否 | false | 按钮加载状态，默认为false | | loading | 是否显示为加载状态 | `Boolean` | `false` |
| openType | String | 否 | - | 微信开放能力 | | block | 是否为块级元素 | `Boolean` | `false` |
| appParameter | String | 否 | - | 打开 APP 时，向 APP 传递的参数 | | open-type | 微信开放能力 | `String` | - |
| hoverStartTime | Number | 否 | 20 | 按住后多久出现点击态，单位毫秒 | | app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - |
| hoverStayTime | Number | 否 | 70 | 手指松开后点击态保留时间，单位毫秒 | | hover-start-time | 按住后多久出现点击态，单位毫秒 | `Number` | 20 |
| lang | String | 否 | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | | hover-stay-time | 手指松开后点击态保留时间，单位毫秒 | `Number` | 70 |
| sessionFrom | String | 否 | - | 会话来源 | | lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | `String` | `en` |
| sendMessageTitle | String | 否 | 当前标题 | 会话内消息卡片标题 | | session-from | 会话来源 | `String` | - |
| sendMessagePath | String | 否 | 当前分享路径 | 会话内消息卡片点击跳转小程序路径 | | send-message-title | 会话内消息卡片标题 | `String` | 当前标题 |
| sendMessageImg | String | 否 | 截图 | 会话内消息卡片图片 | | send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 |
| showMessageCard | String | 否 | false | 显示会话内消息卡片 | | send-message-img | sendMessageImg | `String` | 截图 |
| show-message-card | 显示会话内消息卡片 | `String` | `false` |
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| buttonclick | 按钮在可用状态被点击时触发 | | | click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
| disabledclick | 在传入的 disabled 为 true 时，点击按钮会触发此事件 | | | getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo | | | contact | 客服消息回调 | - |
| contact | 客服消息回调 | | | getphonenumber | 获取用户手机号回调 | - |
| getphonenumber | 获取用户手机号回调 | | | error | 当使用开放能力时，发生错误的回调 | - |
| error | 当使用开放能力时，发生错误的回调 | |

0
packages/button/native-button-behaviors.js → packages/button/behaviors.js
View File

70
packages/button/index.js
View File

@ -1,58 +1,78 @@
const nativeButtonBehavior = require('./native-button-behaviors'); const nativeBehaviors = require('./behaviors');
const classnames = require('../common/classnames');
const observer = function () {
this.setClasses();
};
Component({ Component({
externalClasses: ['custom-class', 'theme-class'], externalClasses: ['custom-class'],
behaviors: [nativeButtonBehavior],
relations: { behaviors: [nativeBehaviors],
'../button-group/index': {
type: 'parent',
linked() {
this.setData({ inGroup: true });
},
unlinked() {
this.setData({ inGroup: false });
}
}
},
properties: { properties: {
type: { type: {
type: String, type: String,
value: '', value: 'default',
observer
}, },
size: { size: {
type: String, type: String,
value: '', value: 'normal',
observer
}, },
plain: { plain: {
type: Boolean, type: Boolean,
value: false, value: false,
observer
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
value: false, value: false,
observer
}, },
loading: { loading: {
type: Boolean, type: Boolean,
value: false, value: false,
observer
},
block: {
type: Boolean,
value: false,
observer
} }
}, },
data: { data: {
inGroup: false, classes: ''
isLast: false },
attached() {
this.setClasses();
}, },
methods: { methods: {
handleTap() { onTap(event) {
if (this.data.disabled) { if (!this.data.disabled && !this.data.loading) {
this.triggerEvent('disabledclick'); this.triggerEvent('click', event);
return;
} }
this.triggerEvent('buttonclick');
}, },
switchLastButtonStatus(isLast = false) { setClasses() {
this.setData({ isLast }); const { type, size, plain, disabled, loading, block } = this.data;
this.setData({
classes: classnames(
`van-button--${type}`,
`van-button--${size}`,
{
'van-button--block': block,
'van-button--plain': plain,
'van-button--loading': loading,
'van-button--disabled': disabled,
'van-button--unclickable': disabled || loading
}
)
});
} }
} }
}); });

5
packages/button/index.json
View File

@ -1,3 +1,6 @@
{ {
"component": true "component": true,
"usingComponents": {
"van-loading": "../loading/index"
}
} }

278
packages/button/index.pcss
View File

@ -1,169 +1,135 @@
@import "../common/_mixins"; @import '../common/var.pcss';
.van-button { .van-button {
position: relative; position: relative;
color: #333; padding: 0;
background-color: #fff; display: inline-block;
padding-left: 15px;
padding-right: 15px;
border-radius: 2px;
font-size: 16px;
line-height: 45px;
height: 45px; height: 45px;
line-height: 43px;
border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
text-decoration: none; font-size: 16px;
text-align: center; text-align: center;
vertical-align: middle; -webkit-appearance: none;
overflow: visible;
}
.van-button--group {
margin-bottom: 10px;
}
.van-button::after {
@mixin hairline;
border-width: 1px;
border-radius: 4px;
}
/* type */
.van-button--primary {
color: #fff;
background-color: #4b0;
&::after { &::after {
border-color: #0a0; content: " ";
}
}
.van-button--warn {
color: #fff;
background-color: #f85;
&::after {
border-color: #f85;
}
}
.van-button--danger {
color: #fff;
background-color: #f44;
&::after {
border-color: #e33;
}
}
/* size */
.van-button--small {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 12px;
/* margin-right: 5px; */
}
.van-button--small.van-button--group {
margin-bottom: 0;
margin-right: 5px;
}
.van-button--mini {
display: inline-block;
line-height: 21px;
height: 22px;
font-size: 10px;
/* margin-right: 5px; */
padding-left: 5px;
padding-right: 5px;
}
.van-button--mini.van-button--group {
margin-bottom: 0;
margin-right: 5px;
}
.van-button--large {
border-radius: 0;
border: none;
line-height: 50px;
height: 50px;
}
.van-button--large.van-button--group {
margin-bottom: 0;
}
/* plain */
.van-button--plain.van-button {
background-color: transparent;
}
.van-button--plain.van-button--primary {
color: #06BF04;
}
.van-button--plain.van-button--warn {
color: #FF6600;
}
.van-button--plain.van-button--danger {
color: #FF4444;
}
/* 重写button组件的button-hover样式 */
.button-hover {
opacity: 0.9;
}
/* loading */
.van-button--loading {
color: transparent;
opacity: 1;
}
.van-button--loading::before {
position: absolute; position: absolute;
left: 50%;
top: 50%; top: 50%;
content: ' '; left: 50%;
width: 16px; opacity: 0;
height: 16px; width: 100%;
margin-left: -8px; height: 100%;
margin-top: -8px; border: inherit;
border: 3px solid #e5e5e5; border-color: $black;
border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5; background-color: $black;
border-radius: 8px; border-radius: inherit; /* inherit parent's border radius */
box-sizing: border-box; transform: translate(-50%, -50%);
animation: button-spin 0.6s linear;
animation-iteration-count: infinite;
}
.van-button--primary.van-button--loading::before,
.van-button--warn.van-button--loading::before,
.van-button--danger.van-button--loading::before {
border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}
@keyframes button-spin {
0% {
transform: rotate(0);
} }
100% {
transform: rotate(360deg); &:active::after {
opacity: .3;
}
&--unclickable::after {
display: none;
}
&--default {
color: $button-default-color;
background-color: $button-default-background-color;
border: 1px solid $button-default-border-color;
}
&--primary {
color: $button-primary-color;
background-color: $button-primary-background-color;
border: 1px solid $button-primary-border-color;
}
&--danger {
color: $button-danger-color;
background-color: $button-danger-background-color;
border: 1px solid $button-danger-border-color;
}
&--plain {
background-color: $white;
&.van-button--primary {
color: $button-primary-background-color;
}
&.van-button--danger {
color: $button-danger-background-color;
}
}
&--large {
width: 100%;
height: 50px;
line-height: 48px;
}
&--normal {
padding: 0 15px;
font-size: 14px;
}
&--small {
height: 30px;
padding: 0 8px;
min-width: 60px;
font-size: 12px;
line-height: 28px;
}
&--loading {
.van-loading {
display: inline-block;
}
.van-button__text {
display: none;
}
}
/* mini图标默认宽度50px，文字不能超过4个 */
&--mini {
display: inline-block;
width: 50px;
height: 22px;
line-height: 20px;
font-size: 10px;
& + .van-button--mini {
margin-left: 5px;
}
}
&--block {
width: 100%;
display: block;
}
&--bottom-action {
width: 100%;
height: 50px;
line-height: 50px;
border: 0;
border-radius: 0;
font-size: 16px;
color: $button-bottom-action-default-color;
background-color: $button-bottom-action-default-background-color;
&.van-button--primary {
background-color: $button-bottom-action-primary-background-color;
}
}
&--disabled {
color: $button-disabled-color;
background-color: $button-disabled-background-color;
border: 1px solid $button-disabled-border-color;
} }
} }
/* disabled */
.van-button.van-button--disabled {
/* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */
color: #999 ! important;
background: #f8f8f8 ! important;
border-color: #e5e5e5 ! important;
cursor: not-allowed ! important;
opacity: 1 ! important;
&::after {
border-color: #e5e5e5 ! important;
}
}
/* :last-child */
.van-button--group.van-button--last {
margin-bottom: 0;
margin-right: 0;
}

5
packages/button/index.wxml
View File

@ -1,5 +1,5 @@
<button <button
class="custom-class theme-class van-button {{ inGroup ? 'van-button--group' : '' }} {{ isLast ? 'van-button--last' : '' }} {{size ? 'van-button--'+size : ''}} {{size === 'mini' ? 'van-button--plain' : ''}} {{plain ? 'van-button--plain' : ''}} {{type ? 'van-button--'+type : ''}} {{loading ? 'van-button--loading' : ''}} {{disabled ? 'van-button--disabled' : ''}}" class="custom-class van-button {{ classes }}"
disabled="{{ disabled }}" disabled="{{ disabled }}"
hover-class="button-hover" hover-class="button-hover"
open-type="{{ openType }}" open-type="{{ openType }}"
@ -13,12 +13,13 @@
send-message-path="{{ sendMessagePath }}" send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}" send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}" show-message-card="{{ showMessageCard }}"
bindtap="handleTap" bindtap="onTap"
bindcontact="bindcontact" bindcontact="bindcontact"
bindgetuserinfo="bindgetuserinfo" bindgetuserinfo="bindgetuserinfo"
bindgetphonenumber="bindgetphonenumber" bindgetphonenumber="bindgetphonenumber"
binderror="binderror" binderror="binderror"
bindopensetting="bindopensetting" bindopensetting="bindopensetting"
> >
<van-loading wx:if="{{ loading }}" color="{{ type === 'default' ? 'black' : 'white' }}" />
<slot></slot> <slot></slot>
</button> </button>

10
packages/common/_var.pcss
View File

@ -12,22 +12,22 @@ $gray-dark: #999;
/* default colors */ /* default colors */
$text-color: #333; $text-color: #333;
$border-color: #ccc; $border-color: $gray-light;
$active-color: #e8e8e8; $active-color: #e8e8e8;
$background-color: #f8f8f8; $background-color: #f8f8f8;
/* button */ /* button */
$button-default-color: $text-color; $button-default-color: $text-color;
$button-default-background-color: $white; $button-default-background-color: $white;
$button-default-border-color: $gray-light; $button-default-border-color: $border-color;
$button-primary-color: $white; $button-primary-color: $white;
$button-primary-background-color: #4b0; $button-primary-background-color: #4b0;
$button-primary-border-color: #0a0; $button-primary-border-color: #4b0;
$button-danger-color: $white; $button-danger-color: $white;
$button-danger-background-color: $red; $button-danger-background-color: $red;
$button-danger-border-color: #e33; $button-danger-border-color: $red;
$button-disabled-color: $gray-dark; $button-disabled-color: $gray-dark;
$button-disabled-background-color: $gray-light; $button-disabled-background-color: $active-color;
$button-disabled-border-color: $border-color; $button-disabled-border-color: $border-color;
$button-bottom-action-default-color: $white; $button-bottom-action-default-color: $white;
$button-bottom-action-default-background-color: #f85; $button-bottom-action-default-background-color: #f85;

29
packages/common/classnames.js Normal file
View File

@ -0,0 +1,29 @@
const hasOwn = {}.hasOwnProperty;
module.exports = function classNames() {
const classes = [];
for (let i = 0; i < arguments.length; i++) {
const arg = arguments[i];
if (!arg) continue;
const argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
const inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (const key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
};

35
packages/common/var.pcss Normal file
View File

@ -0,0 +1,35 @@
/* color variables */
$black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$orange: #f60;
$green: #06bf04;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
$gray-darker: #666;
$gray-dark: #999;
/* default colors */
$text-color: #333;
$border-color: $gray-light;
$active-color: #e8e8e8;
$background-color: #f8f8f8;
/* button */
$button-default-color: $text-color;
$button-default-background-color: $white;
$button-default-border-color: $border-color;
$button-primary-color: $white;
$button-primary-background-color: #4b0;
$button-primary-border-color: #4b0;
$button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: $red;
$button-disabled-color: $gray-dark;
$button-disabled-background-color: $active-color;
$button-disabled-border-color: $border-color;
$button-bottom-action-default-color: $white;
$button-bottom-action-default-background-color: #f85;
$button-bottom-action-primary-color: $white;
$button-bottom-action-primary-background-color: $red;