mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
[breaking change] Rename btn to button
This commit is contained in:
陈嘉涵
parent
84538c888e
commit
1f34ff1a18
@ -59,12 +59,12 @@ npm run dev
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-button": "/path/to/vant-weapp/dist/btn/index"
|
||||
"van-button": "/path/to/vant-weapp/dist/button/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
```html
|
||||
<!-- example/btn/index.html -->
|
||||
<!-- example/button/index.html -->
|
||||
|
||||
<van-button>按钮</van-button>
|
||||
```
|
||||
|
||||
2
dist/actionsheet/index.json
vendored
2
dist/actionsheet/index.json
vendored
@ -1,6 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-btn": "../btn/index"
|
||||
"van-button": "../button/index"
|
||||
}
|
||||
}
|
||||
|
||||
16
dist/actionsheet/index.wxml
vendored
16
dist/actionsheet/index.wxml
vendored
@ -5,17 +5,17 @@
|
||||
></view>
|
||||
<view class="container-class van-actionsheet__container">
|
||||
<!-- 选项按钮 -->
|
||||
<van-btn
|
||||
<van-button
|
||||
wx:for="{{ actions }}"
|
||||
wx:key="{{ index }}-{{ item.name }}"
|
||||
bind:btnclick="handleBtnClick"
|
||||
bind:buttonclick="handleBtnClick"
|
||||
data-index="{{ index }}"
|
||||
open-type="{{ item.openType }}"
|
||||
custom-class="van-actionsheet__btn"
|
||||
custom-class="van-actionsheet__button"
|
||||
loading="{{ item.loading }}"
|
||||
>
|
||||
<!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
|
||||
<view class="van-actionsheet__btn-content {{ item.loading ? 'van-actionsheet__btn--loading' : '' }}">
|
||||
<view class="van-actionsheet__button-content {{ item.loading ? 'van-actionsheet__button--loading' : '' }}">
|
||||
<view class="van-actionsheet__name">{{ item.name }}</view>
|
||||
<view
|
||||
wx:if="{{ item.subname }}"
|
||||
@ -23,17 +23,17 @@
|
||||
{{ item.subname }}
|
||||
</view>
|
||||
</view>
|
||||
</van-btn>
|
||||
</van-button>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view
|
||||
wx:if="{{ cancelText }}"
|
||||
class="van-actionsheet__footer"
|
||||
>
|
||||
<van-btn
|
||||
custom-class="van-actionsheet__btn"
|
||||
<van-button
|
||||
custom-class="van-actionsheet__button"
|
||||
catchtap="cancelClick"
|
||||
>{{ cancelText }}</van-btn>
|
||||
>{{ cancelText }}</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
2
dist/actionsheet/index.wxss
vendored
2
dist/actionsheet/index.wxss
vendored
@ -1 +1 @@
|
||||
.van-actionsheet{background-color:#f8f8f8}.van-actionsheet__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.van-actionsheet__container{position:fixed;left:0;right:0;bottom:0;background:#f8f8f8;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:11;opacity:0;visibility:hidden}.van-actionsheet__btn{margin-bottom:0!important}.van-actionsheet__footer .van-actionsheet__btn{background:#fff}.van-actionsheet__btn-content{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center}.van-actionsheet__subname{color:#999}.van-actionsheet__name,.van-actionsheet__subname{height:45px;line-height:45px}.van-actionsheet__btn.van-btn:last-child::after{border-bottom-width:0}.van-actionsheet__subname{margin-left:2px;font-size:12px}.van-actionsheet__footer{margin-top:10px}.van-actionsheet__btn--loading .van-actionsheet__subname{color:transparent}.van-actionsheet--show .van-actionsheet__container{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:visible}.van-actionsheet--show .van-actionsheet__mask{display:block}
|
||||
.van-actionsheet{background-color:#f8f8f8}.van-actionsheet__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.7);display:none}.van-actionsheet__container{position:fixed;left:0;right:0;bottom:0;background:#f8f8f8;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:11;opacity:0;visibility:hidden}.van-actionsheet__button{margin-bottom:0!important}.van-actionsheet__footer .van-actionsheet__button{background:#fff}.van-actionsheet__button-content{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center}.van-actionsheet__subname{color:#999}.van-actionsheet__name,.van-actionsheet__subname{height:45px;line-height:45px}.van-actionsheet__button.van-button:last-child::after{border-bottom-width:0}.van-actionsheet__subname{margin-left:2px;font-size:12px}.van-actionsheet__footer{margin-top:10px}.van-actionsheet__button--loading .van-actionsheet__subname{color:transparent}.van-actionsheet--show .van-actionsheet__container{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:visible}.van-actionsheet--show .van-actionsheet__mask{display:block}
|
||||
12
dist/btn-group/index.js
vendored
12
dist/btn-group/index.js
vendored
@ -2,7 +2,7 @@
|
||||
|
||||
Component({
|
||||
relations: {
|
||||
'../btn/index': {
|
||||
'../button/index': {
|
||||
type: 'child',
|
||||
linked: function linked() {
|
||||
updateBtnChild.call(this);
|
||||
@ -18,13 +18,13 @@ Component({
|
||||
});
|
||||
|
||||
function updateBtnChild() {
|
||||
var btns = this.getRelationNodes('../btn/index');
|
||||
var buttons = this.getRelationNodes('../button/index');
|
||||
|
||||
if (btns.length > 0) {
|
||||
var lastIndex = btns.length - 1;
|
||||
if (buttons.length > 0) {
|
||||
var lastIndex = buttons.length - 1;
|
||||
|
||||
btns.forEach(function (btn, index) {
|
||||
btn.switchLastButtonStatus(index === lastIndex);
|
||||
buttons.forEach(function (button, index) {
|
||||
button.switchLastButtonStatus(index === lastIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
2
dist/btn-group/index.wxml
vendored
2
dist/btn-group/index.wxml
vendored
@ -1,3 +1,3 @@
|
||||
<view class="btn-group">
|
||||
<view class="button-group">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
2
dist/btn-group/index.wxss
vendored
2
dist/btn-group/index.wxss
vendored
@ -1,3 +1,3 @@
|
||||
.btn-group {
|
||||
.button-group {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
4
dist/btn/index.js
vendored
4
dist/btn/index.js
vendored
@ -6,7 +6,7 @@ Component({
|
||||
externalClasses: ['custom-class', 'theme-class'],
|
||||
behaviors: [nativeButtonBehavior],
|
||||
relations: {
|
||||
'../btn-group/index': {
|
||||
'../button-group/index': {
|
||||
type: 'parent',
|
||||
linked: function linked() {
|
||||
this.setData({ inGroup: true });
|
||||
@ -50,7 +50,7 @@ Component({
|
||||
this.triggerEvent('disabledclick');
|
||||
return;
|
||||
}
|
||||
this.triggerEvent('btnclick');
|
||||
this.triggerEvent('buttonclick');
|
||||
},
|
||||
switchLastButtonStatus: function switchLastButtonStatus() {
|
||||
var isLast = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
2
dist/btn/index.wxml
vendored
2
dist/btn/index.wxml
vendored
@ -1,5 +1,5 @@
|
||||
<button
|
||||
class="custom-class theme-class van-btn {{ inGroup ? 'van-btn--group' : '' }} {{ isLast ? 'van-btn--last' : '' }} {{size ? 'van-btn--'+size : ''}} {{size === 'mini' ? 'van-btn--plain' : ''}} {{plain ? 'van-btn--plain' : ''}} {{type ? 'van-btn--'+type : ''}} {{loading ? 'van-btn--loading' : ''}} {{disabled ? 'van-btn--disabled' : ''}}"
|
||||
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' : ''}}"
|
||||
disabled="{{ disabled }}"
|
||||
hover-class="button-hover"
|
||||
open-type="{{ openType }}"
|
||||
|
||||
2
dist/btn/index.wxss
vendored
2
dist/btn/index.wxss
vendored
@ -1 +1 @@
|
||||
.van-btn{position:relative;color:#333;background-color:#fff;padding-left:15px;padding-right:15px;border-radius:2px;font-size:16px;line-height:45px;height:45px;box-sizing:border-box;text-decoration:none;text-align:center;vertical-align:middle;overflow:visible}.van-btn--group{margin-bottom:10px}.van-btn::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-width:1px;border-radius:4px}.van-btn--primary{color:#fff;background-color:#4b0}.van-btn--primary::after{border-color:#0a0}.van-btn--warn{color:#fff;background-color:#f85}.van-btn--warn::after{border-color:#f85}.van-btn--danger{color:#fff;background-color:#f44}.van-btn--danger::after{border-color:#e33}.van-btn--small{display:inline-block;height:30px;line-height:30px;font-size:12px}.van-btn--small.van-btn--group{margin-bottom:0;margin-right:5px}.van-btn--mini{display:inline-block;line-height:21px;height:22px;font-size:10px;padding-left:5px;padding-right:5px}.van-btn--mini.van-btn--group{margin-bottom:0;margin-right:5px}.van-btn--large{border-radius:0;border:none;line-height:50px;height:50px}.van-btn--large.van-btn--group{margin-bottom:0}.van-btn--plain.van-btn{background-color:transparent}.van-btn--plain.van-btn--primary{color:#06bf04}.van-btn--plain.van-btn--warn{color:#f60}.van-btn--plain.van-btn--danger{color:#f44}.button-hover{opacity:.9}.van-btn--loading{color:transparent;opacity:1}.van-btn--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;-webkit-animation:btn-spin .6s linear;animation:btn-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.van-btn--danger.van-btn--loading::before,.van-btn--primary.van-btn--loading::before,.van-btn--warn.van-btn--loading::before{border-color:#fff rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1)}@-webkit-keyframes btn-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes btn-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-btn.van-btn--disabled{color:#999!important;background:#f8f8f8!important;border-color:#e5e5e5!important;cursor:not-allowed!important;opacity:1!important}.van-btn.van-btn--disabled::after{border-color:#e5e5e5!important}.van-btn--group.van-btn--last{margin-bottom:0;margin-right:0}
|
||||
.van-button{position:relative;color:#333;background-color:#fff;padding-left:15px;padding-right:15px;border-radius:2px;font-size:16px;line-height:45px;height:45px;box-sizing:border-box;text-decoration:none;text-align:center;vertical-align:middle;overflow:visible}.van-button--group{margin-bottom:10px}.van-button::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-width:1px;border-radius:4px}.van-button--primary{color:#fff;background-color:#4b0}.van-button--primary::after{border-color:#0a0}.van-button--warn{color:#fff;background-color:#f85}.van-button--warn::after{border-color:#f85}.van-button--danger{color:#fff;background-color:#f44}.van-button--danger::after{border-color:#e33}.van-button--small{display:inline-block;height:30px;line-height:30px;font-size:12px}.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;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}.van-button--plain.van-button{background-color:transparent}.van-button--plain.van-button--primary{color:#06bf04}.van-button--plain.van-button--warn{color:#f60}.van-button--plain.van-button--danger{color:#f44}.button-hover{opacity:.9}.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;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.van-button--danger.van-button--loading::before,.van-button--primary.van-button--loading::before,.van-button--warn.van-button--loading::before{border-color:#fff rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1)}@-webkit-keyframes button-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes button-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-button.van-button--disabled{color:#999!important;background:#f8f8f8!important;border-color:#e5e5e5!important;cursor:not-allowed!important;opacity:1!important}.van-button.van-button--disabled::after{border-color:#e5e5e5!important}.van-button--group.van-button--last{margin-bottom:0;margin-right:0}
|
||||
2
dist/dialog/dialog.js
vendored
2
dist/dialog/dialog.js
vendored
@ -18,7 +18,7 @@ function getParsedOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
return Object.assign({
|
||||
// 自定义 btn 列表
|
||||
// 自定义 button 列表
|
||||
// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
|
||||
buttons: []
|
||||
}, defaultData, options);
|
||||
|
||||
2
dist/dialog/index.js
vendored
2
dist/dialog/index.js
vendored
@ -9,7 +9,7 @@ Component({
|
||||
data: {
|
||||
// 标题
|
||||
title: '',
|
||||
// 自定义 btn 列表
|
||||
// 自定义 button 列表
|
||||
// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
|
||||
buttons: [],
|
||||
// 内容
|
||||
|
||||
2
dist/dialog/index.json
vendored
2
dist/dialog/index.json
vendored
@ -2,6 +2,6 @@
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"pop-manager": "../common/pop-manager/index",
|
||||
"van-button": "../btn/index"
|
||||
"van-button": "../button/index"
|
||||
}
|
||||
}
|
||||
|
||||
2
dist/dialog/index.wxml
vendored
2
dist/dialog/index.wxml
vendored
@ -25,7 +25,7 @@
|
||||
data-type="{{ item.type }}"
|
||||
data-open-type="{{ item.openType }}"
|
||||
open-type="{{ item.openType }}"
|
||||
bind:btnclick="handleButtonClick"
|
||||
bind:buttonclick="handleButtonClick"
|
||||
bind:getuserinfo="handleUserInfoResponse"
|
||||
bind:getphonenumber="handlePhoneResponse"
|
||||
bind:opensetting="handleOpenSettingResponse"
|
||||
|
||||
@ -35,7 +35,7 @@ module.exports = {
|
||||
label: '基础',
|
||||
include: {
|
||||
icon: require('./packages/icon/README.md'),
|
||||
btn: require('./packages/btn/README.md'),
|
||||
button: require('./packages/button/README.md'),
|
||||
helper: require('./packages/helper/README.md'),
|
||||
loading: require('./packages/loading/README.md')
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"pages": [
|
||||
"pages/dashboard/index",
|
||||
"pages/actionsheet/index",
|
||||
"pages/btn/index",
|
||||
"pages/button/index",
|
||||
"pages/checkbox/index",
|
||||
"pages/badge/index",
|
||||
"pages/capsule/index",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"navigationBarTitleText": "Actionsheet 上拉菜单",
|
||||
"usingComponents": {
|
||||
"van-actionsheet": "../../dist/actionsheet/index",
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
<doc-page title="ACTIONSHEET">
|
||||
<view class="van-btns" style="margin-top: 30vh;">
|
||||
<van-button bind:btnclick="openActionsheet">
|
||||
<view class="van-buttons" style="margin-top: 30vh;">
|
||||
<van-button bind:buttonclick="openActionsheet">
|
||||
Actionsheet
|
||||
</van-button>
|
||||
</view>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Button 按钮",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button-group": "../../dist/btn-group/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
path: '/pages/badge/index'
|
||||
}, {
|
||||
name: 'Button 按钮',
|
||||
path: '/pages/btn/index'
|
||||
path: '/pages/button/index'
|
||||
}, {
|
||||
name: 'Capsule 胶囊',
|
||||
path: '/pages/capsule/index'
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
"usingComponents": {
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"van-dialog": "../../dist/dialog/index",
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button-group": "../../dist/btn-group/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-toast": "../../dist/toast/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Field 输入框",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button-group": "../../dist/btn-group/index",
|
||||
"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",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</van-panel>
|
||||
|
||||
<van-button-group>
|
||||
<van-button type="primary" bind:btnclick="clearInput">清除输入</van-button>
|
||||
<van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
|
||||
</van-button-group>
|
||||
|
||||
<!-- 去除标题后的输入框样式 -->
|
||||
@ -46,7 +46,7 @@
|
||||
</van-panel>
|
||||
|
||||
<van-button-group>
|
||||
<van-button type="primary" bind:btnclick="clearTextarea">清除输入</van-button>
|
||||
<van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
|
||||
</van-button-group>
|
||||
|
||||
<!-- 使用 Field 圆角样式 -->
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
"usingComponents": {
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"van-popup": "../../dist/popup/index",
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button-group": "../../dist/btn-group/index"
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<doc-page title="POPUP">
|
||||
<van-button-group style="margin-top: 10vh;display: block;">
|
||||
<van-button class="van-btn" bind:btnclick="togglePopup">
|
||||
<van-button class="van-button" bind:buttonclick="togglePopup">
|
||||
弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-btn" bind:btnclick="toggleTopPopup">
|
||||
<van-button class="van-button" bind:buttonclick="toggleTopPopup">
|
||||
从顶部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-btn" bind:btnclick="toggleBottomPopup">
|
||||
<van-button class="van-button" bind:buttonclick="toggleBottomPopup">
|
||||
从底部弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-btn" bind:btnclick="toggleLeftPopup">
|
||||
<van-button class="van-button" bind:buttonclick="toggleLeftPopup">
|
||||
从左边弹出popup
|
||||
</van-button>
|
||||
<van-button class="van-btn" bind:btnclick="toggleRightPopup">
|
||||
<van-button class="van-button" bind:buttonclick="toggleRightPopup">
|
||||
从右边弹出popup
|
||||
</van-button>
|
||||
</van-button-group>
|
||||
@ -23,8 +23,8 @@
|
||||
bindclose="togglePopup"
|
||||
>
|
||||
<view class="pop-example__container">
|
||||
<view class="van-btns">
|
||||
<button class="van-btn" bindtap="togglePopup">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" bindtap="togglePopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
@ -38,8 +38,8 @@
|
||||
bindclose="toggleLeftPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--left">
|
||||
<view class="van-btns">
|
||||
<button class="van-btn" bindtap="toggleLeftPopup">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" bindtap="toggleLeftPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
@ -53,8 +53,8 @@
|
||||
bindclose="toggleRightPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--right">
|
||||
<view class="van-btns">
|
||||
<button class="van-btn" catchtap="toggleRightPopup">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" catchtap="toggleRightPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
@ -78,8 +78,8 @@
|
||||
bindclose="toggleBottomPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--bottom">
|
||||
<view class="van-btns">
|
||||
<button class="van-btn" catchtap="toggleBottomPopup">
|
||||
<view class="van-buttons">
|
||||
<button class="van-button" catchtap="toggleBottomPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Toast 轻提示",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button-group": "../../dist/btn-group/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-button-group": "../../dist/button-group/index",
|
||||
"van-toast": "../../dist/toast/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,31 +5,31 @@
|
||||
<view class="doc-title van-hairline--bottom">TOAST</view>
|
||||
|
||||
<van-button-group style="margin-top: 15vh;display: block;">
|
||||
<van-button bind:btnclick="showToast">
|
||||
<van-button bind:buttonclick="showToast">
|
||||
显示toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:btnclick="showIconToast">
|
||||
<van-button bind:buttonclick="showIconToast">
|
||||
显示 Icon 图标的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:btnclick="showImageToast">
|
||||
<van-button bind:buttonclick="showImageToast">
|
||||
自定义图片作为图标的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:btnclick="showLoadingToast">
|
||||
<van-button bind:buttonclick="showLoadingToast">
|
||||
显示 Loading toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:btnclick="showOnlyIcon">
|
||||
<van-button bind:buttonclick="showOnlyIcon">
|
||||
只显示图标的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:btnclick="showEverToast">
|
||||
<van-button bind:buttonclick="showEverToast">
|
||||
不消失的的toast
|
||||
</van-button>
|
||||
|
||||
<van-button bind:btnclick="showLoading">
|
||||
<van-button bind:buttonclick="showLoading">
|
||||
显示 Loading
|
||||
</van-button>
|
||||
</van-button-group>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Toptips 顶部提示",
|
||||
"usingComponents": {
|
||||
"van-button": "../../dist/btn/index",
|
||||
"van-button": "../../dist/button/index",
|
||||
"van-toptips": "../../dist/toptips/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<doc-page title="TOPTIPS">
|
||||
<view style="margin-top: 30vh;">
|
||||
<van-button bind:btnclick="showTopTips">
|
||||
<van-button bind:buttonclick="showTopTips">
|
||||
显示toptips，声明式调用
|
||||
</van-button>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 30px;">
|
||||
<van-button bind:btnclick="showTopTips2">
|
||||
<van-button bind:buttonclick="showTopTips2">
|
||||
显示toptips，命令式调用
|
||||
</van-button>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 30px;">
|
||||
<van-button bind:btnclick="showTopTips3">
|
||||
<van-button bind:buttonclick="showTopTips3">
|
||||
显示toptips，持续一秒
|
||||
</van-button>
|
||||
</view>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-btn": "../btn/index"
|
||||
"van-button": "../button/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,15 +30,15 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.van-actionsheet__btn {
|
||||
.van-actionsheet__button {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.van-actionsheet__footer .van-actionsheet__btn {
|
||||
.van-actionsheet__footer .van-actionsheet__button {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.van-actionsheet__btn-content {
|
||||
.van-actionsheet__button-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
|
||||
.van-actionsheet__btn.van-btn:last-child {
|
||||
.van-actionsheet__button.van-button:last-child {
|
||||
&::after {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
@ -70,8 +70,8 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* btn-loading 状态 */
|
||||
.van-actionsheet__btn--loading .van-actionsheet__subname {
|
||||
/* button-loading 状态 */
|
||||
.van-actionsheet__button--loading .van-actionsheet__subname {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
@ -5,17 +5,17 @@
|
||||
></view>
|
||||
<view class="container-class van-actionsheet__container">
|
||||
<!-- 选项按钮 -->
|
||||
<van-btn
|
||||
<van-button
|
||||
wx:for="{{ actions }}"
|
||||
wx:key="{{ index }}-{{ item.name }}"
|
||||
bind:btnclick="handleBtnClick"
|
||||
bind:buttonclick="handleBtnClick"
|
||||
data-index="{{ index }}"
|
||||
open-type="{{ item.openType }}"
|
||||
custom-class="van-actionsheet__btn"
|
||||
custom-class="van-actionsheet__button"
|
||||
loading="{{ item.loading }}"
|
||||
>
|
||||
<!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
|
||||
<view class="van-actionsheet__btn-content {{ item.loading ? 'van-actionsheet__btn--loading' : '' }}">
|
||||
<view class="van-actionsheet__button-content {{ item.loading ? 'van-actionsheet__button--loading' : '' }}">
|
||||
<view class="van-actionsheet__name">{{ item.name }}</view>
|
||||
<view
|
||||
wx:if="{{ item.subname }}"
|
||||
@ -23,17 +23,17 @@
|
||||
{{ item.subname }}
|
||||
</view>
|
||||
</view>
|
||||
</van-btn>
|
||||
</van-button>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view
|
||||
wx:if="{{ cancelText }}"
|
||||
class="van-actionsheet__footer"
|
||||
>
|
||||
<van-btn
|
||||
custom-class="van-actionsheet__btn"
|
||||
<van-button
|
||||
custom-class="van-actionsheet__button"
|
||||
catchtap="cancelClick"
|
||||
>{{ cancelText }}</van-btn>
|
||||
>{{ cancelText }}</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
<view class="btn-group">
|
||||
<slot></slot>
|
||||
</view>
|
||||
@ -1,6 +1,6 @@
|
||||
Component({
|
||||
relations: {
|
||||
'../btn/index': {
|
||||
'../button/index': {
|
||||
type: 'child',
|
||||
linked() {
|
||||
updateBtnChild.call(this);
|
||||
@ -16,13 +16,13 @@ Component({
|
||||
});
|
||||
|
||||
function updateBtnChild() {
|
||||
let btns = this.getRelationNodes('../btn/index');
|
||||
let buttons = this.getRelationNodes('../button/index');
|
||||
|
||||
if (btns.length > 0) {
|
||||
let lastIndex = btns.length - 1;
|
||||
if (buttons.length > 0) {
|
||||
let lastIndex = buttons.length - 1;
|
||||
|
||||
btns.forEach((btn, index) => {
|
||||
btn.switchLastButtonStatus(index === lastIndex);
|
||||
buttons.forEach((button, index) => {
|
||||
button.switchLastButtonStatus(index === lastIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
3
packages/button-group/index.wxml
Normal file
3
packages/button-group/index.wxml
Normal file
@ -0,0 +1,3 @@
|
||||
<view class="button-group">
|
||||
<slot></slot>
|
||||
</view>
|
||||
@ -1,3 +1,3 @@
|
||||
.btn-group {
|
||||
.button-group {
|
||||
margin: 15px;
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
在 json 文件中配置button组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-button": "path/to/vant-weapp/dist/btn/index"
|
||||
"van-button": "path/to/vant-weapp/dist/button/index"
|
||||
}
|
||||
```
|
||||
|
||||
@ -53,8 +53,8 @@
|
||||
1.在 json 文件中配置 button-group 组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-button": "path/to/vant-weapp/dist/btn/index",
|
||||
"van-button-group": "path/to/vant-weapp/dist/btn-group/index"
|
||||
"van-button": "path/to/vant-weapp/dist/button/index",
|
||||
"van-button-group": "path/to/vant-weapp/dist/button-group/index"
|
||||
}
|
||||
```
|
||||
2.在 wxml 中直接引入
|
||||
@ -90,7 +90,7 @@
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| btnclick | 按钮在可用状态被点击时触发 | |
|
||||
| buttonclick | 按钮在可用状态被点击时触发 | |
|
||||
| disabledclick | 在传入的 disabled 为 true 时，点击按钮会触发此事件 | |
|
||||
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo | |
|
||||
| contact | 客服消息回调 | |
|
||||
@ -4,7 +4,7 @@ Component({
|
||||
externalClasses: ['custom-class', 'theme-class'],
|
||||
behaviors: [nativeButtonBehavior],
|
||||
relations: {
|
||||
'../btn-group/index': {
|
||||
'../button-group/index': {
|
||||
type: 'parent',
|
||||
linked() {
|
||||
this.setData({ inGroup: true });
|
||||
@ -45,10 +45,10 @@ Component({
|
||||
methods: {
|
||||
handleTap() {
|
||||
if (this.data.disabled) {
|
||||
this.triggerEvent('disabledclick')
|
||||
this.triggerEvent('disabledclick');
|
||||
return;
|
||||
}
|
||||
this.triggerEvent('btnclick');
|
||||
this.triggerEvent('buttonclick');
|
||||
},
|
||||
|
||||
switchLastButtonStatus(isLast = false) {
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../common/_mixins";
|
||||
|
||||
.van-btn {
|
||||
.van-button {
|
||||
position: relative;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
@ -17,18 +17,18 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.van-btn--group {
|
||||
.van-button--group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.van-btn::after {
|
||||
.van-button::after {
|
||||
@mixin hairline;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* type */
|
||||
.van-btn--primary {
|
||||
.van-button--primary {
|
||||
color: #fff;
|
||||
background-color: #4b0;
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.van-btn--warn {
|
||||
.van-button--warn {
|
||||
color: #fff;
|
||||
background-color: #f85;
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.van-btn--danger {
|
||||
.van-button--danger {
|
||||
color: #fff;
|
||||
background-color: #f44;
|
||||
|
||||
@ -56,19 +56,19 @@
|
||||
}
|
||||
|
||||
/* size */
|
||||
.van-btn--small {
|
||||
.van-button--small {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
/* margin-right: 5px; */
|
||||
}
|
||||
.van-btn--small.van-btn--group {
|
||||
.van-button--small.van-button--group {
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.van-btn--mini {
|
||||
.van-button--mini {
|
||||
display: inline-block;
|
||||
line-height: 21px;
|
||||
height: 22px;
|
||||
@ -77,32 +77,32 @@
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.van-btn--mini.van-btn--group {
|
||||
.van-button--mini.van-button--group {
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.van-btn--large {
|
||||
.van-button--large {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.van-btn--large.van-btn--group {
|
||||
.van-button--large.van-button--group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* plain */
|
||||
.van-btn--plain.van-btn {
|
||||
.van-button--plain.van-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
.van-btn--plain.van-btn--primary {
|
||||
.van-button--plain.van-button--primary {
|
||||
color: #06BF04;
|
||||
}
|
||||
.van-btn--plain.van-btn--warn {
|
||||
.van-button--plain.van-button--warn {
|
||||
color: #FF6600;
|
||||
}
|
||||
.van-btn--plain.van-btn--danger {
|
||||
.van-button--plain.van-button--danger {
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
@ -112,11 +112,11 @@
|
||||
}
|
||||
|
||||
/* loading */
|
||||
.van-btn--loading {
|
||||
.van-button--loading {
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
.van-btn--loading::before {
|
||||
.van-button--loading::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -129,16 +129,16 @@
|
||||
border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
animation: btn-spin 0.6s linear;
|
||||
animation: button-spin 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.van-btn--primary.van-btn--loading::before,
|
||||
.van-btn--warn.van-btn--loading::before,
|
||||
.van-btn--danger.van-btn--loading::before {
|
||||
.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 btn-spin {
|
||||
@keyframes button-spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
@ -148,7 +148,7 @@
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
.van-btn.van-btn--disabled {
|
||||
.van-button.van-button--disabled {
|
||||
/* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */
|
||||
color: #999 ! important;
|
||||
background: #f8f8f8 ! important;
|
||||
@ -162,7 +162,7 @@
|
||||
}
|
||||
|
||||
/* :last-child */
|
||||
.van-btn--group.van-btn--last {
|
||||
.van-button--group.van-button--last {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<button
|
||||
class="custom-class theme-class van-btn {{ inGroup ? 'van-btn--group' : '' }} {{ isLast ? 'van-btn--last' : '' }} {{size ? 'van-btn--'+size : ''}} {{size === 'mini' ? 'van-btn--plain' : ''}} {{plain ? 'van-btn--plain' : ''}} {{type ? 'van-btn--'+type : ''}} {{loading ? 'van-btn--loading' : ''}} {{disabled ? 'van-btn--disabled' : ''}}"
|
||||
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' : ''}}"
|
||||
disabled="{{ disabled }}"
|
||||
hover-class="button-hover"
|
||||
open-type="{{ openType }}"
|
||||
@ -32,19 +32,24 @@ module.exports = Behavior({
|
||||
sendMessageImg: String,
|
||||
showMessageCard: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
bindgetuserinfo({ detail = {} } = {}) {
|
||||
this.triggerEvent('getuserinfo', detail);
|
||||
},
|
||||
|
||||
bindcontact({ detail = {} } = {}) {
|
||||
this.triggerEvent('contact', detail);
|
||||
},
|
||||
|
||||
bindgetphonenumber({ detail = {} } = {}) {
|
||||
this.triggerEvent('getphonenumber', detail);
|
||||
},
|
||||
bindopensetting({ detail = {}} = {}) {
|
||||
|
||||
bindopensetting({ detail = {} } = {}) {
|
||||
this.triggerEvent('opensetting', detail);
|
||||
},
|
||||
|
||||
binderror({ detail = {} } = {}) {
|
||||
this.triggerEvent('error', detail);
|
||||
}
|
||||
@ -11,7 +11,7 @@ function getDialogCtx({ selector, pageCtx }) {
|
||||
|
||||
function getParsedOptions(options = {}) {
|
||||
return {
|
||||
// 自定义 btn 列表
|
||||
// 自定义 button 列表
|
||||
// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
|
||||
buttons: [],
|
||||
...defaultData,
|
||||
|
||||
@ -7,7 +7,7 @@ Component({
|
||||
data: {
|
||||
// 标题
|
||||
title: '',
|
||||
// 自定义 btn 列表
|
||||
// 自定义 button 列表
|
||||
// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
|
||||
buttons: [],
|
||||
// 内容
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"pop-manager": "../common/pop-manager/index",
|
||||
"van-button": "../btn/index"
|
||||
"van-button": "../button/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
data-type="{{ item.type }}"
|
||||
data-open-type="{{ item.openType }}"
|
||||
open-type="{{ item.openType }}"
|
||||
bind:btnclick="handleButtonClick"
|
||||
bind:buttonclick="handleButtonClick"
|
||||
bind:getuserinfo="handleUserInfoResponse"
|
||||
bind:getphonenumber="handlePhoneResponse"
|
||||
bind:opensetting="handleOpenSettingResponse"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user