mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
[breaking change] Button: rewrite
This commit is contained in:
陈嘉涵
parent
2f6ec315cb
commit
9f420f4b79
30
dist/btn-group/index.js
vendored
30
dist/btn-group/index.js
vendored
@ -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
3
dist/btn-group/index.wxml
vendored
@ -1,3 +0,0 @@
|
||||
<view class="button-group">
|
||||
<slot></slot>
|
||||
</view>
|
||||
3
dist/btn-group/index.wxss
vendored
3
dist/btn-group/index.wxss
vendored
@ -1,3 +0,0 @@
|
||||
.button-group {
|
||||
margin: 15px;
|
||||
}
|
||||
@ -5,7 +5,16 @@ page {
|
||||
background: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 15rpx 0;
|
||||
padding: 0 0 100rpx;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
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
5
example/components/demo-block/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
Component({
|
||||
properties: {
|
||||
title: String
|
||||
}
|
||||
});
|
||||
4
example/components/demo-block/index.wxml
Normal file
4
example/components/demo-block/index.wxml
Normal 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
11
example/components/demo-block/index.wxss
Normal 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;
|
||||
}
|
||||
@ -1,15 +1 @@
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
onShow() {
|
||||
},
|
||||
|
||||
getPhoneNumber(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
Page({});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Button 按钮",
|
||||
"usingComponents": {
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-panel": "../../dist/panel/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,51 +1,29 @@
|
||||
<van-panel title="普通按钮">
|
||||
<van-button-group>
|
||||
<van-button
|
||||
open-type="getPhoneNumber"
|
||||
bind:getphonenumber="getPhoneNumber"
|
||||
>获取电话</van-button>
|
||||
<van-button type="primary">确认付款</van-button>
|
||||
<van-button type="danger">确认付款</van-button>
|
||||
<van-button type="warn">确认付款</van-button>
|
||||
</van-button-group>
|
||||
</van-panel>
|
||||
<demo-section>
|
||||
<demo-block title="按钮类型">
|
||||
<van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
|
||||
<van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="大号按钮，没有边框线及圆角">
|
||||
<van-button size="large" type="primary">确认付款</van-button>
|
||||
<van-button size="large" type="warn">立即购买</van-button>
|
||||
<van-button size="large" type="danger">立即购买</van-button>
|
||||
</van-panel>
|
||||
<demo-block title="朴素按钮">
|
||||
<van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
|
||||
<van-button type="primary" plain custom-class="demo-margin-right">主要按钮</van-button>
|
||||
<van-button type="danger" plain>危险按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="小号按钮">
|
||||
<van-button-group>
|
||||
<van-button size="small">取消订单</van-button>
|
||||
<van-button size="small" type="primary">确认付款</van-button>
|
||||
</van-button-group>
|
||||
</van-panel>
|
||||
<demo-block title="按钮尺寸">
|
||||
<van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
|
||||
<van-button size="normal" class="demo-margin-right">普通按钮</van-button>
|
||||
<van-button size="small" class="demo-margin-right">小型按钮</van-button>
|
||||
<van-button size="mini">迷你按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="迷你按钮">
|
||||
<van-button-group>
|
||||
<van-button size="mini">取消订单</van-button>
|
||||
<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>
|
||||
<demo-block title="禁用状态">
|
||||
<van-button disabled>禁用状态</van-button>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="Loading">
|
||||
<van-button-group>
|
||||
<van-button loading>取消订单</van-button>
|
||||
<van-button loading type="primary">确认付款</van-button>
|
||||
<van-button loading type="danger">确认付款</van-button>
|
||||
<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>
|
||||
<demo-block title="加载状态">
|
||||
<van-button loading custom-class="demo-margin-right" />
|
||||
<van-button loading type="primary" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
0
example/pages/button/index.wxss
Normal file
0
example/pages/button/index.wxss
Normal file
@ -3,7 +3,6 @@
|
||||
"usingComponents": {
|
||||
"van-dialog": "../../dist/dialog/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-toast": "../../dist/toast/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<van-button-group style="margin-top: 30vh; display: block;">
|
||||
<van-button bindtap="toggleBaseDialog">基础 Dialog</van-button>
|
||||
<van-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</van-button>
|
||||
<van-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</van-button>
|
||||
<van-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</van-button>
|
||||
<van-button bindtap="toggleOpenDialog">Dialog - 获取 Open 数据的弹窗</van-button>
|
||||
<van-button bindtap="toggleCloseDialog">Dialog - 控制弹窗关闭</van-button>
|
||||
</van-button-group>
|
||||
|
||||
<van-button bindtap="toggleBaseDialog">基础 Dialog</van-button>
|
||||
<van-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</van-button>
|
||||
<van-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</van-button>
|
||||
<van-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</van-button>
|
||||
<van-button bindtap="toggleOpenDialog">Dialog - 获取 Open 数据的弹窗</van-button>
|
||||
<van-button bindtap="toggleCloseDialog">Dialog - 控制弹窗关闭</van-button>
|
||||
|
||||
|
||||
<van-dialog id="van-base-dialog"></van-dialog>
|
||||
<van-dialog id="van-no-title-dialog"></van-dialog>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"navigationBarTitleText": "Field 输入框",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-cell-group": "../../dist/cell-group/index",
|
||||
"van-field": "../../dist/field/index",
|
||||
"van-panel": "../../dist/panel/index"
|
||||
|
||||
@ -31,9 +31,7 @@
|
||||
</van-cell-group>
|
||||
</van-panel>
|
||||
|
||||
<van-button-group>
|
||||
<van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
|
||||
</van-button-group>
|
||||
<van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
|
||||
|
||||
<!-- 去除标题后的输入框样式 -->
|
||||
<van-panel title="无标题输入框">
|
||||
@ -44,9 +42,7 @@
|
||||
</van-field>
|
||||
</van-panel>
|
||||
|
||||
<van-button-group>
|
||||
<van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
|
||||
</van-button-group>
|
||||
<van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
|
||||
|
||||
<!-- 使用 Field 圆角样式 -->
|
||||
<van-panel title="圆角输入框">
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
"navigationBarTitleText": "Popup 弹出层",
|
||||
"usingComponents": {
|
||||
"van-popup": "../../dist/popup/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index"
|
||||
"van-button": "../../dist/button/index"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
<van-button-group style="margin-top: 10vh;display: block;">
|
||||
<van-button class="van-button" bind:buttonclick="togglePopup">
|
||||
弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleTopPopup">
|
||||
从顶部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleBottomPopup">
|
||||
从底部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleLeftPopup">
|
||||
从左边弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleRightPopup">
|
||||
从右边弹出popup
|
||||
</van-button>
|
||||
</van-button-group>
|
||||
<van-button class="van-button" bind:buttonclick="togglePopup">
|
||||
弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleTopPopup">
|
||||
从顶部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleBottomPopup">
|
||||
从底部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleLeftPopup">
|
||||
从左边弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-button" bind:buttonclick="toggleRightPopup">
|
||||
从右边弹出popup
|
||||
</van-button>
|
||||
|
||||
<!-- 中间弹出框 -->
|
||||
<van-popup
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"navigationBarTitleText": "Toast 轻提示",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-toast": "../../dist/toast/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,36 +1,33 @@
|
||||
<import src="/dist/toast/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
<van-button bind:buttonclick="showToast">
|
||||
显示toast
|
||||
</van-button>
|
||||
|
||||
<van-button-group style="margin-top: 15vh;display: block;">
|
||||
<van-button bind:buttonclick="showToast">
|
||||
显示toast
|
||||
</van-button>
|
||||
<van-button bind:buttonclick="showIconToast">
|
||||
显示 Icon 图标的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:buttonclick="showIconToast">
|
||||
显示 Icon 图标的toast
|
||||
</van-button>
|
||||
<van-button bind:buttonclick="showImageToast">
|
||||
自定义图片作为图标的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:buttonclick="showImageToast">
|
||||
自定义图片作为图标的toast
|
||||
</van-button>
|
||||
<van-button bind:buttonclick="showLoadingToast">
|
||||
显示 Loading toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:buttonclick="showLoadingToast">
|
||||
显示 Loading toast
|
||||
</van-button>
|
||||
<van-button bind:buttonclick="showOnlyIcon">
|
||||
只显示图标的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:buttonclick="showOnlyIcon">
|
||||
只显示图标的toast
|
||||
</van-button>
|
||||
<van-button bind:buttonclick="showEverToast">
|
||||
不消失的的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:buttonclick="showEverToast">
|
||||
不消失的的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:buttonclick="showLoading">
|
||||
显示 Loading
|
||||
</van-button>
|
||||
</van-button-group>
|
||||
<van-button bind:buttonclick="showLoading">
|
||||
显示 Loading
|
||||
</van-button>
|
||||
</view>
|
||||
|
||||
<!-- <template is="van-toast" data="{{ zanToast }}"></template> -->
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
<view class="button-group">
|
||||
<slot></slot>
|
||||
</view>
|
||||
@ -1,3 +0,0 @@
|
||||
.button-group {
|
||||
margin: 15px;
|
||||
}
|
||||
@ -10,89 +10,74 @@
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
```html
|
||||
<van-button>取消订单</van-button>
|
||||
```
|
||||
|
||||
#### 按钮类型
|
||||
按钮支持额外的三种类型 primary, danger, warn
|
||||
支持`default`、`primary`、`danger`三种类型，默认为`default`
|
||||
|
||||
```html
|
||||
<van-button type="primary">确认付款</van-button>
|
||||
<van-button type="danger">确认付款</van-button>
|
||||
<van-button type="warn">确认付款</van-button>
|
||||
<van-button type="default">默认按钮</van-button>
|
||||
<van-button type="primary">主要按钮</van-button>
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
```
|
||||
|
||||
#### 按钮大小
|
||||
按钮支持额外三种大小 large, small, mini
|
||||
#### 朴素按钮
|
||||
|
||||
```html
|
||||
<van-button size="large">确认付款</van-button>
|
||||
<van-button size="small">取消订单</van-button>
|
||||
<van-button size="mini">确认付款</van-button>
|
||||
<van-button type="default" plain>默认按钮</van-button>
|
||||
<van-button type="primary" plain>主要按钮</van-button>
|
||||
<van-button type="danger" plain>危险按钮</van-button>
|
||||
```
|
||||
|
||||
#### 其他
|
||||
按钮镂空状态
|
||||
#### 按钮尺寸
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
|
||||
```html
|
||||
<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
|
||||
<van-button plain>确认付款</van-button>
|
||||
<van-button disabled>禁用状态</van-button>
|
||||
```
|
||||
|
||||
按钮加载状态
|
||||
```html
|
||||
<van-button loading>确认付款</van-button>
|
||||
```
|
||||
#### 加载状态
|
||||
|
||||
按钮禁用状态
|
||||
```html
|
||||
<van-button disabled>确认付款</van-button>
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
|---------|---------|----------|------|-------|
|
||||
| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger |
|
||||
| size | String | 否 | 空 | 按钮大小，值有large、small、mini |
|
||||
| plain | Boolean | 否 | false | 按钮是否镂空，默认为false |
|
||||
| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false |
|
||||
| loading | Boolean | 否 | false | 按钮加载状态，默认为false |
|
||||
| openType | String | 否 | - | 微信开放能力 |
|
||||
| appParameter | String | 否 | - | 打开 APP 时，向 APP 传递的参数 |
|
||||
| hoverStartTime | Number | 否 | 20 | 按住后多久出现点击态，单位毫秒 |
|
||||
| hoverStayTime | Number | 否 | 70 | 手指松开后点击态保留时间，单位毫秒 |
|
||||
| lang | String | 否 | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 |
|
||||
| sessionFrom | String | 否 | - | 会话来源 |
|
||||
| sendMessageTitle | String | 否 | 当前标题 | 会话内消息卡片标题 |
|
||||
| sendMessagePath | String | 否 | 当前分享路径 | 会话内消息卡片点击跳转小程序路径 |
|
||||
| sendMessageImg | String | 否 | 截图 | 会话内消息卡片图片 |
|
||||
| showMessageCard | String | 否 | false | 显示会话内消息卡片 |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
|
||||
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
|
||||
| plain | 是否为朴素按钮 | `Boolean` | `false` |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` |
|
||||
| open-type | 微信开放能力 | `String` | - |
|
||||
| app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - |
|
||||
| hover-start-time | 按住后多久出现点击态，单位毫秒 | `Number` | 20 |
|
||||
| hover-stay-time | 手指松开后点击态保留时间，单位毫秒 | `Number` | 70 |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | `String` | `en` |
|
||||
| session-from | 会话来源 | `String` | - |
|
||||
| send-message-title | 会话内消息卡片标题 | `String` | 当前标题 |
|
||||
| send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 |
|
||||
| send-message-img | sendMessageImg | `String` | 截图 |
|
||||
| show-message-card | 显示会话内消息卡片 | `String` | `false` |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| buttonclick | 按钮在可用状态被点击时触发 | |
|
||||
| disabledclick | 在传入的 disabled 为 true 时，点击按钮会触发此事件 | |
|
||||
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo | |
|
||||
| contact | 客服消息回调 | |
|
||||
| getphonenumber | 获取用户手机号回调 | |
|
||||
| error | 当使用开放能力时，发生错误的回调 | |
|
||||
| click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
|
||||
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| contact | 客服消息回调 | - |
|
||||
| getphonenumber | 获取用户手机号回调 | - |
|
||||
| error | 当使用开放能力时，发生错误的回调 | - |
|
||||
|
||||
@ -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({
|
||||
externalClasses: ['custom-class', 'theme-class'],
|
||||
behaviors: [nativeButtonBehavior],
|
||||
relations: {
|
||||
'../button-group/index': {
|
||||
type: 'parent',
|
||||
linked() {
|
||||
this.setData({ inGroup: true });
|
||||
},
|
||||
unlinked() {
|
||||
this.setData({ inGroup: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
externalClasses: ['custom-class'],
|
||||
|
||||
behaviors: [nativeBehaviors],
|
||||
|
||||
properties: {
|
||||
type: {
|
||||
type: String,
|
||||
value: '',
|
||||
value: 'default',
|
||||
observer
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: '',
|
||||
value: 'normal',
|
||||
observer
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
inGroup: false,
|
||||
isLast: false
|
||||
classes: ''
|
||||
},
|
||||
|
||||
attached() {
|
||||
this.setClasses();
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTap() {
|
||||
if (this.data.disabled) {
|
||||
this.triggerEvent('disabledclick');
|
||||
return;
|
||||
onTap(event) {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
this.triggerEvent('click', event);
|
||||
}
|
||||
this.triggerEvent('buttonclick');
|
||||
},
|
||||
|
||||
switchLastButtonStatus(isLast = false) {
|
||||
this.setData({ isLast });
|
||||
setClasses() {
|
||||
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
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-loading": "../loading/index"
|
||||
}
|
||||
}
|
||||
@ -1,169 +1,135 @@
|
||||
@import "../common/_mixins";
|
||||
@import '../common/var.pcss';
|
||||
|
||||
.van-button {
|
||||
position: relative;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
line-height: 45px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
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;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::after {
|
||||
border-color: #0a0;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: inherit;
|
||||
border-color: $black;
|
||||
background-color: $black;
|
||||
border-radius: inherit; /* inherit parent's border radius */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
content: ' ';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
border: 3px solid #e5e5e5;
|
||||
border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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 }}"
|
||||
hover-class="button-hover"
|
||||
open-type="{{ openType }}"
|
||||
@ -13,12 +13,13 @@
|
||||
send-message-path="{{ sendMessagePath }}"
|
||||
send-message-img="{{ sendMessageImg }}"
|
||||
show-message-card="{{ showMessageCard }}"
|
||||
bindtap="handleTap"
|
||||
bindtap="onTap"
|
||||
bindcontact="bindcontact"
|
||||
bindgetuserinfo="bindgetuserinfo"
|
||||
bindgetphonenumber="bindgetphonenumber"
|
||||
binderror="binderror"
|
||||
bindopensetting="bindopensetting"
|
||||
>
|
||||
<van-loading wx:if="{{ loading }}" color="{{ type === 'default' ? 'black' : 'white' }}" />
|
||||
<slot></slot>
|
||||
</button>
|
||||
|
||||
@ -12,22 +12,22 @@ $gray-dark: #999;
|
||||
|
||||
/* default colors */
|
||||
$text-color: #333;
|
||||
$border-color: #ccc;
|
||||
$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: $gray-light;
|
||||
$button-default-border-color: $border-color;
|
||||
$button-primary-color: $white;
|
||||
$button-primary-background-color: #4b0;
|
||||
$button-primary-border-color: #0a0;
|
||||
$button-primary-border-color: #4b0;
|
||||
$button-danger-color: $white;
|
||||
$button-danger-background-color: $red;
|
||||
$button-danger-border-color: #e33;
|
||||
$button-danger-border-color: $red;
|
||||
$button-disabled-color: $gray-dark;
|
||||
$button-disabled-background-color: $gray-light;
|
||||
$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;
|
||||
|
||||
29
packages/common/classnames.js
Normal file
29
packages/common/classnames.js
Normal 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
35
packages/common/var.pcss
Normal 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;
|
||||
Loading…
x
Reference in New Issue
Block a user