mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] use click instead of tap for all components (#418)
This commit is contained in:
neverland
GitHub
parent
10f157adbb
commit
d96f7ba161
2
dist/actionsheet/index.wxml
vendored
2
dist/actionsheet/index.wxml
vendored
@ -8,7 +8,7 @@
|
||||
>
|
||||
<view wx:if="{{ title }}" class="van-hairline--top-bottom van-actionsheet__header">
|
||||
<view>{{ title }}</view>
|
||||
<van-icon custom-class="van-actionsheet__close" name="close" bind:tap="onClose" />
|
||||
<van-icon custom-class="van-actionsheet__close" name="close" bind:click="onClose" />
|
||||
</view>
|
||||
<view wx:else class="van-hairline--bottom">
|
||||
<view
|
||||
|
||||
2
dist/badge/index.js
vendored
2
dist/badge/index.js
vendored
@ -17,7 +17,7 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap: function onTap() {
|
||||
onClick: function onClick() {
|
||||
var group = this.getRelationNodes(BADGE_GROUP_PATH)[0];
|
||||
if (group) {
|
||||
group.setActive(this);
|
||||
|
||||
2
dist/badge/index.wxml
vendored
2
dist/badge/index.wxml
vendored
@ -1,4 +1,4 @@
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onTap">
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
|
||||
<view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
10
dist/button/index.js
vendored
10
dist/button/index.js
vendored
@ -25,22 +25,18 @@ Component({
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: observer
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: observer
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: observer
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: observer
|
||||
}
|
||||
},
|
||||
@ -51,9 +47,9 @@ Component({
|
||||
|
||||
|
||||
methods: {
|
||||
onTap: function onTap(event) {
|
||||
onClick: function onClick() {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
this.triggerEvent('tap', event);
|
||||
this.triggerEvent('click');
|
||||
}
|
||||
},
|
||||
setClasses: function setClasses() {
|
||||
@ -71,7 +67,7 @@ Component({
|
||||
'van-button--plain': plain,
|
||||
'van-button--loading': loading,
|
||||
'van-button--disabled': disabled,
|
||||
'van-button--untapable': disabled || loading
|
||||
'van-button--unclickable': disabled || loading
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
2
dist/button/index.wxml
vendored
2
dist/button/index.wxml
vendored
@ -13,7 +13,7 @@
|
||||
send-message-path="{{ sendMessagePath }}"
|
||||
send-message-img="{{ sendMessageImg }}"
|
||||
show-message-card="{{ showMessageCard }}"
|
||||
catch:tap="onTap"
|
||||
bind:tap="onClick"
|
||||
bindcontact="bindcontact"
|
||||
bindgetuserinfo="bindgetuserinfo"
|
||||
bindgetphonenumber="bindgetphonenumber"
|
||||
|
||||
2
dist/button/index.wxss
vendored
2
dist/button/index.wxss
vendored
@ -1 +1 @@
|
||||
.van-button{position:relative;padding:0;display:inline-block;height:44px;line-height:42px;border-radius:3px;box-sizing:border-box;font-size:16px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button::after{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:active::after{opacity:.3}.van-button--untapable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #e5e5e5}.van-button--primary{color:#fff;background-color:#4b0;border:1px solid #4b0}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#f85;border:1px solid #f85}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#4b0}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#f85}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;padding:0 8px;min-width:60px;font-size:12px;line-height:28px}.van-button--loading .van-loading{display:inline-block}.van-button--loading .van-button__text{display:none}.van-button--mini{display:inline-block;width:50px;height:22px;line-height:20px;font-size:10px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{width:100%;display:block}.van-button--disabled{color:#999;background-color:#e8e8e8;border:1px solid #e5e5e5}
|
||||
.van-button{position:relative;padding:0;display:inline-block;height:44px;line-height:42px;border-radius:3px;box-sizing:border-box;font-size:16px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button::after{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:active::after{opacity:.3}.van-button--unclickable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #e5e5e5}.van-button--primary{color:#fff;background-color:#4b0;border:1px solid #4b0}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#f85;border:1px solid #f85}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#4b0}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#f85}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;padding:0 8px;min-width:60px;font-size:12px;line-height:28px}.van-button--loading .van-loading{display:inline-block}.van-button--loading .van-button__text{display:none}.van-button--mini{display:inline-block;width:50px;height:22px;line-height:20px;font-size:10px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{width:100%;display:block}.van-button--disabled{color:#999;background-color:#e8e8e8;border:1px solid #e5e5e5}
|
||||
4
dist/card/index.wxml
vendored
4
dist/card/index.wxml
vendored
@ -4,9 +4,9 @@
|
||||
<slot wx:else name="thumb" />
|
||||
</view>
|
||||
<view class="van-card__content">
|
||||
<view wx:if="{{ title || price }}" class="van-card__row">
|
||||
<view wx:if="{{ title || price || price === 0 }}" class="van-card__row">
|
||||
<view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
|
||||
<view wx:if="{{ price }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
|
||||
<view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
|
||||
</view>
|
||||
<slot wx:else name="title" />
|
||||
<view wx:if="{{ desc || num }}" class="van-card__row">
|
||||
|
||||
5
dist/cell/index.js
vendored
5
dist/cell/index.js
vendored
@ -16,7 +16,7 @@ Component({
|
||||
center: Boolean,
|
||||
isLink: Boolean,
|
||||
required: Boolean,
|
||||
tapable: Boolean,
|
||||
clickable: Boolean,
|
||||
titleWidth: String,
|
||||
customStyle: String,
|
||||
arrowDirection: String,
|
||||
@ -31,12 +31,13 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap: function onTap() {
|
||||
onClick: function onClick() {
|
||||
var url = this.data.url;
|
||||
|
||||
if (url) {
|
||||
wx[this.data.linkType]({ url: url });
|
||||
}
|
||||
this.triggerEvent('click');
|
||||
}
|
||||
}
|
||||
});
|
||||
4
dist/cell/index.wxml
vendored
4
dist/cell/index.wxml
vendored
@ -1,7 +1,7 @@
|
||||
<view
|
||||
class="custom-class van-cell {{ center ? 'van-cell--center' : '' }} {{ required ? 'van-cell--required' : '' }} {{ isLink || tapable ? 'van-cell--tapable' : '' }} {{ border ? 'van-hairline' : '' }}"
|
||||
class="custom-class van-cell {{ center ? 'van-cell--center' : '' }} {{ required ? 'van-cell--required' : '' }} {{ isLink || clickable ? 'van-cell--clickable' : '' }} {{ border ? 'van-hairline' : '' }}"
|
||||
style="{{ customStyle }}"
|
||||
bind:tap="onTap"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<van-icon wx:if="{{ icon }}" custom-class="van-cell__left-icon left-icon-class" name="{{ icon }}" />
|
||||
<slot wx:else name="icon" />
|
||||
|
||||
2
dist/cell/index.wxss
vendored
2
dist/cell/index.wxss
vendored
@ -1 +1 @@
|
||||
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::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}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-cell{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;padding:10px 15px;box-sizing:border-box;line-height:24px;position:relative;background-color:#fff;color:#333;font-size:14px}.van-cell::after{left:15px;right:0;width:auto;-webkit-transform:scale(1,.5);transform:scale(1,.5);border-bottom-width:1px}.van-cell-group{background-color:#fff}.van-cell__label{font-size:12px;line-height:1.2;color:#666}.van-cell__title,.van-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle}.van-cell__left-icon{font-size:16px;line-height:24px;margin-right:5px;vertical-align:middle}.van-cell__right-icon{color:#999;font-size:12px;line-height:24px;margin-left:5px}.van-cell__right-icon--left::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-cell__right-icon--up::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-cell__right-icon--down::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.van-cell--tapable:active{background-color:#e8e8e8}.van-cell--required{overflow:visible}.van-cell--required::before{content:'*';position:absolute;left:7px;font-size:14px;color:#f44}.van-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}
|
||||
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::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}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-cell{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;padding:10px 15px;box-sizing:border-box;line-height:24px;position:relative;background-color:#fff;color:#333;font-size:14px}.van-cell::after{left:15px;right:0;width:auto;-webkit-transform:scale(1,.5);transform:scale(1,.5);border-bottom-width:1px}.van-cell-group{background-color:#fff}.van-cell__label{font-size:12px;line-height:1.2;color:#666}.van-cell__title,.van-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle}.van-cell__left-icon{font-size:16px;line-height:24px;margin-right:5px;vertical-align:middle}.van-cell__right-icon{color:#999;font-size:12px;line-height:24px;margin-left:5px}.van-cell__right-icon--left::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-cell__right-icon--up::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-cell__right-icon--down::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.van-cell--clickable:active{background-color:#e8e8e8}.van-cell--required{overflow:visible}.van-cell--required::before{content:'*';position:absolute;left:7px;font-size:14px;color:#f44}.van-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}
|
||||
4
dist/field/index.js
vendored
4
dist/field/index.js
vendored
@ -98,8 +98,8 @@ Component({
|
||||
showClear: this.getShowClear({ focused: false })
|
||||
});
|
||||
},
|
||||
onTapIcon: function onTapIcon() {
|
||||
this.triggerEvent('tap-icon');
|
||||
onClickIcon: function onClickIcon() {
|
||||
this.triggerEvent('click-icon');
|
||||
},
|
||||
getShowClear: function getShowClear(options) {
|
||||
var _options$focused = options.focused,
|
||||
|
||||
2
dist/field/index.wxml
vendored
2
dist/field/index.wxml
vendored
@ -52,7 +52,7 @@
|
||||
custom-class="van-field__clear"
|
||||
bind:touchstart="onClear"
|
||||
/>
|
||||
<view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onTapIcon">
|
||||
<view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onClickIcon">
|
||||
<van-icon
|
||||
wx:if="{{ icon }}"
|
||||
name="{{ icon }}"
|
||||
|
||||
6
dist/icon/index.js
vendored
6
dist/icon/index.js
vendored
@ -8,5 +8,11 @@ Component({
|
||||
name: String,
|
||||
size: String,
|
||||
color: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick: function onClick() {
|
||||
this.triggerEvent('click');
|
||||
}
|
||||
}
|
||||
});
|
||||
1
dist/icon/index.wxml
vendored
1
dist/icon/index.wxml
vendored
@ -1,6 +1,7 @@
|
||||
<view
|
||||
class="custom-class van-icon van-icon-{{ name }}"
|
||||
style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
|
||||
</view>
|
||||
|
||||
8
dist/nav-bar/index.js
vendored
8
dist/nav-bar/index.js
vendored
@ -20,11 +20,11 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTapLeft: function onTapLeft() {
|
||||
this.triggerEvent('tap-left');
|
||||
onClickLeft: function onClickLeft() {
|
||||
this.triggerEvent('click-left');
|
||||
},
|
||||
onTapRight: function onTapRight() {
|
||||
this.triggerEvent('tap-right');
|
||||
onClickRight: function onClickRight() {
|
||||
this.triggerEvent('click-right');
|
||||
}
|
||||
}
|
||||
});
|
||||
4
dist/nav-bar/index.wxml
vendored
4
dist/nav-bar/index.wxml
vendored
@ -2,7 +2,7 @@
|
||||
class="custom-class van-nav-bar van-hairline--bottom {{ fixed ? 'van-nav-bar--fixed' : '' }}"
|
||||
style="z-index: {{ zIndex }}"
|
||||
>
|
||||
<view class="van-nav-bar__left" bind:tap="onTapLeft">
|
||||
<view class="van-nav-bar__left" bind:tap="onClickLeft">
|
||||
<block wx:if="{{ leftArrow || leftText }}">
|
||||
<van-icon
|
||||
wx:if="{{ leftArrow }}"
|
||||
@ -17,7 +17,7 @@
|
||||
<block wx:if="{{ title }}">{{ title }}</block>
|
||||
<slot wx:else name="title" />
|
||||
</view>
|
||||
<view class="van-nav-bar__right" bind:tap="onTapRight">
|
||||
<view class="van-nav-bar__right" bind:tap="onClickRight">
|
||||
<view wx:if="{{ rightText }}" class="van-nav-bar__text">{{ rightText }}</view>
|
||||
<slot wx:else name="right" />
|
||||
</view>
|
||||
|
||||
4
dist/notice-bar/index.js
vendored
4
dist/notice-bar/index.js
vendored
@ -174,8 +174,8 @@ Component({
|
||||
timer: null
|
||||
});
|
||||
},
|
||||
onTap: function onTap(event) {
|
||||
this.triggerEvent('tap', event);
|
||||
onClick: function onClick(event) {
|
||||
this.triggerEvent('click', event);
|
||||
}
|
||||
}
|
||||
});
|
||||
4
dist/notice-bar/index.wxml
vendored
4
dist/notice-bar/index.wxml
vendored
@ -2,7 +2,7 @@
|
||||
wx:if="{{ show }}"
|
||||
class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
|
||||
style="color: {{ color }};background-color: {{ backgroundColor }}"
|
||||
bind:tap="onTap"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
|
||||
<image src="{{ leftIcon }}" />
|
||||
@ -18,7 +18,7 @@
|
||||
wx:if="{{ mode === 'closeable' }}"
|
||||
class="van-notice-bar__right-icon"
|
||||
name="close"
|
||||
bindtap="_handleButtonClick"
|
||||
bind:tap="_handleButtonClick"
|
||||
/>
|
||||
<navigator
|
||||
wx:if="{{ mode === 'link' }}"
|
||||
|
||||
2
dist/switch/index.js
vendored
2
dist/switch/index.js
vendored
@ -14,7 +14,7 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap: function onTap() {
|
||||
onClick: function onClick() {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
var checked = !this.data.checked;
|
||||
this.triggerEvent('input', checked);
|
||||
|
||||
2
dist/switch/index.wxml
vendored
2
dist/switch/index.wxml
vendored
@ -1,7 +1,7 @@
|
||||
<view
|
||||
class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
|
||||
style="font-size: {{ size }};"
|
||||
bind:tap="onTap"
|
||||
bind:tap="Click"
|
||||
>
|
||||
<view class="van-switch__node node-class">
|
||||
<van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
|
||||
|
||||
8
dist/tree-select/index.js
vendored
8
dist/tree-select/index.js
vendored
@ -42,22 +42,22 @@ Component({
|
||||
|
||||
methods: {
|
||||
// 当一个子项被选择时
|
||||
onItemSelect: function onItemSelect(event) {
|
||||
onSelectItem: function onSelectItem(event) {
|
||||
var _ref = event.currentTarget || {},
|
||||
_ref$dataset = _ref.dataset,
|
||||
dataset = _ref$dataset === undefined ? {} : _ref$dataset;
|
||||
|
||||
this.triggerEvent('itemclick', _extends({}, dataset.item || {}));
|
||||
this.triggerEvent('click-item', _extends({}, dataset.item || {}));
|
||||
},
|
||||
|
||||
|
||||
// 当一个导航被点击时
|
||||
handleNavClick: function handleNavClick(event) {
|
||||
onClickNav: function onClickNav(event) {
|
||||
var _ref2 = event.currentTarget || {},
|
||||
_ref2$dataset = _ref2.dataset,
|
||||
dataset = _ref2$dataset === undefined ? {} : _ref2$dataset;
|
||||
|
||||
this.triggerEvent('navclick', { index: dataset.index });
|
||||
this.triggerEvent('click-nav', { index: dataset.index });
|
||||
},
|
||||
|
||||
|
||||
|
||||
4
dist/tree-select/index.wxml
vendored
4
dist/tree-select/index.wxml
vendored
@ -8,7 +8,7 @@
|
||||
wx:key="index"
|
||||
class="tree-select__nitem van-ellipsis {{ mainActiveIndex === index ? 'tree-select__nitem--active' : '' }}"
|
||||
data-index="{{ index }}"
|
||||
bindtap="handleNavClick"
|
||||
bind:tap="onClickNav"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
@ -22,7 +22,7 @@
|
||||
wx:key="id"
|
||||
class="tree-select__item van-ellipsis {{ activeId === item.id ? 'tree-select__item--active' : '' }}"
|
||||
data-item="{{ item }}"
|
||||
bindtap="onItemSelect"
|
||||
bind:tap="onSelectItem"
|
||||
>
|
||||
{{ item.text }}
|
||||
<van-icon
|
||||
|
||||
14
dist/utils/index.js
vendored
Normal file
14
dist/utils/index.js
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
function isDef(value) {
|
||||
return value !== undefined && value !== null;
|
||||
}
|
||||
|
||||
function isObj(x) {
|
||||
var type = typeof x;
|
||||
return x !== null && (type === 'object' || type === 'function');
|
||||
}
|
||||
|
||||
exports.isObj = isObj;
|
||||
exports.isDef = isDef;
|
||||
@ -1,5 +1,5 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-button bind:tap="toggleActionsheet1">弹出 Actionsheet</van-button>
|
||||
<van-button bind:click="toggleActionsheet1">弹出 Actionsheet</van-button>
|
||||
<van-actionsheet
|
||||
show="{{ show1 }}"
|
||||
actions="{{ actions }}"
|
||||
@ -9,7 +9,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="带取消按钮的 Actionsheet" padding>
|
||||
<van-button bind:tap="toggleActionsheet2">弹出带取消按钮的 Actionsheet</van-button>
|
||||
<van-button bind:click="toggleActionsheet2">弹出带取消按钮的 Actionsheet</van-button>
|
||||
<van-actionsheet
|
||||
show="{{ show2 }}"
|
||||
actions="{{ actions }}"
|
||||
@ -21,7 +21,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="带标题的 Actionsheet" padding>
|
||||
<van-button bind:tap="toggleActionsheet3">弹出带标题的 Actionsheet</van-button>
|
||||
<van-button bind:click="toggleActionsheet3">弹出带标题的 Actionsheet</van-button>
|
||||
<van-actionsheet
|
||||
show="{{ show3 }}"
|
||||
title="标题"
|
||||
|
||||
@ -11,7 +11,7 @@ Page({
|
||||
phone: '1365577'
|
||||
},
|
||||
|
||||
onTapIcon() {
|
||||
onClickIcon() {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '点击图标'
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
icon="question"
|
||||
icon-class="icon"
|
||||
required
|
||||
bind:tap-icon="onTapIcon"
|
||||
bind:click-icon="onClickIcon"
|
||||
/>
|
||||
<van-field
|
||||
value="{{ password }}"
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
onTapLeft() {
|
||||
onClickLeft() {
|
||||
wx.showToast({ title: '点击返回', icon: 'none' });
|
||||
},
|
||||
|
||||
onTapRight() {
|
||||
onClickRight() {
|
||||
wx.showToast({ title: '点击按钮', icon: 'none' });
|
||||
}
|
||||
});
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
left-text="返回"
|
||||
right-text="按钮"
|
||||
left-arrow
|
||||
bind:tap-left="onTapLeft"
|
||||
bind:tap-right="onTapRight"
|
||||
bind:click-left="onClickLeft"
|
||||
bind:click-right="onClickRight"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<demo-block padding title="基础用法">
|
||||
<van-button bind:tap="showNotify">显示消息通知</van-button>
|
||||
<van-button bind:click="showNotify">显示消息通知</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block padding title="自定义配置">
|
||||
<van-button bind:tap="showNotify2">显示自定义消息通知</van-button>
|
||||
<van-button bind:click="showNotify2">显示自定义消息通知</van-button>
|
||||
</demo-block>
|
||||
|
||||
<van-notify id="van-notify" />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-button bind:tap="togglePopup">弹出 Popup</van-button>
|
||||
<van-button bind:click="togglePopup">弹出 Popup</van-button>
|
||||
<van-popup
|
||||
show="{{ show.middle }}"
|
||||
custom-class="center"
|
||||
@ -10,7 +10,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="弹出位置" padding>
|
||||
<van-button bind:tap="toggleBottomPopup" custom-class="demo-margin-right">底部弹出</van-button>
|
||||
<van-button bind:click="toggleBottomPopup" custom-class="demo-margin-right">底部弹出</van-button>
|
||||
|
||||
<van-popup
|
||||
show="{{ show.bottom }}"
|
||||
@ -21,7 +21,7 @@
|
||||
内容
|
||||
</van-popup>
|
||||
|
||||
<van-button bind:tap="toggleTopPopup" custom-class="demo-margin-right">顶部弹出</van-button>
|
||||
<van-button bind:click="toggleTopPopup" custom-class="demo-margin-right">顶部弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.top }}"
|
||||
position="top"
|
||||
@ -32,23 +32,23 @@
|
||||
内容
|
||||
</van-popup>
|
||||
|
||||
<van-button bind:tap="toggleRightPopup">右侧弹出</van-button>
|
||||
<van-button bind:click="toggleRightPopup">右侧弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.right }}"
|
||||
position="right"
|
||||
custom-class="right"
|
||||
bind:close="toggleRightPopup"
|
||||
>
|
||||
<van-button bind:tap="toggleRightPopup" custom-class="demo-margin-right">关闭弹层</van-button>
|
||||
<van-button bind:click="toggleRightPopup" custom-class="demo-margin-right">关闭弹层</van-button>
|
||||
|
||||
<van-button bind:tap="toggleRightPopup2">右侧弹出</van-button>
|
||||
<van-button bind:click="toggleRightPopup2">右侧弹出</van-button>
|
||||
<van-popup
|
||||
show="{{ show.right2 }}"
|
||||
position="right"
|
||||
custom-class="right"
|
||||
bind:close="toggleRightPopup2"
|
||||
>
|
||||
<van-button bind:tap="toggleRightPopup2">关闭弹层</van-button>
|
||||
<van-button bind:click="toggleRightPopup2">关闭弹层</van-button>
|
||||
</van-popup>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
custom-class="demo-margin-bottom"
|
||||
/>
|
||||
|
||||
<van-button custom-class="demo-margin-left" bind:tap="nextStep">下一步</van-button>
|
||||
<van-button custom-class="demo-margin-left" bind:click="nextStep">下一步</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="竖向步骤条">
|
||||
|
||||
@ -23,13 +23,13 @@ Page({
|
||||
activeId: 1002
|
||||
},
|
||||
|
||||
onNavClick({ detail }) {
|
||||
onClickNav({ detail }) {
|
||||
this.setData({
|
||||
mainActiveIndex: detail.index || 0
|
||||
});
|
||||
},
|
||||
|
||||
onItemClick({ detail }) {
|
||||
onClickItem({ detail }) {
|
||||
this.setData({
|
||||
activeId: detail.id
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
items="{{ items }}"
|
||||
main-active-index="{{ mainActiveIndex }}"
|
||||
active-id="{{ activeId }}"
|
||||
bind:itemclick="onItemClick"
|
||||
bind:navclick="onNavClick"
|
||||
bind:click-item="onClickItem"
|
||||
bind:click-nav="onClickNav"
|
||||
></van-tree-select>
|
||||
</demo-block>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<view wx:if="{{ title }}" class="van-hairline--top-bottom van-actionsheet__header">
|
||||
<view>{{ title }}</view>
|
||||
<van-icon custom-class="van-actionsheet__close" name="close" bind:tap="onClose" />
|
||||
<van-icon custom-class="van-actionsheet__close" name="close" bind:click="onClose" />
|
||||
</view>
|
||||
<view wx:else class="van-hairline--bottom">
|
||||
<view
|
||||
|
||||
@ -15,7 +15,7 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap() {
|
||||
onClick() {
|
||||
const group = this.getRelationNodes(BADGE_GROUP_PATH)[0];
|
||||
if (group) {
|
||||
group.setActive(this);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onTap">
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
|
||||
<view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
| app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - |
|
||||
| hover-start-time | 按住后多久出现点击态，单位毫秒 | `Number` | 20 |
|
||||
| hover-stay-time | 手指松开后点击态保留时间，单位毫秒 | `Number` | 70 |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | `String` | `en` |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | `String` | `en` |
|
||||
| session-from | 会话来源 | `String` | - |
|
||||
| send-message-title | 会话内消息卡片标题 | `String` | 当前标题 |
|
||||
| send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 |
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| tap | 点击按钮且按钮状态不为加载或禁用时触发 | - |
|
||||
| click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
|
||||
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| contact | 客服消息回调 | - |
|
||||
| getphonenumber | 获取用户手机号回调 | - |
|
||||
|
||||
@ -23,22 +23,18 @@ Component({
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer
|
||||
}
|
||||
},
|
||||
@ -48,9 +44,9 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap(event) {
|
||||
onClick() {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
this.triggerEvent('tap', event);
|
||||
this.triggerEvent('click');
|
||||
}
|
||||
},
|
||||
|
||||
@ -62,7 +58,7 @@ Component({
|
||||
'van-button--plain': plain,
|
||||
'van-button--loading': loading,
|
||||
'van-button--disabled': disabled,
|
||||
'van-button--untapable': disabled || loading
|
||||
'van-button--unclickable': disabled || loading
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
&--untapable::after {
|
||||
&--unclickable::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
send-message-path="{{ sendMessagePath }}"
|
||||
send-message-img="{{ sendMessageImg }}"
|
||||
show-message-card="{{ showMessageCard }}"
|
||||
catch:tap="onTap"
|
||||
bind:tap="onClick"
|
||||
bindcontact="bindcontact"
|
||||
bindgetuserinfo="bindgetuserinfo"
|
||||
bindgetphonenumber="bindgetphonenumber"
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
| center | 是否使内容垂直居中 | `Boolean` | `false` |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
|
||||
| tapable | 是否开启点击反馈 | `Boolean` | `false` |
|
||||
| clickable | 是否开启点击反馈 | `Boolean` | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
|
||||
| required | 是否显示表单必填星号 | `Boolean` | `false` |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - |
|
||||
@ -111,7 +111,7 @@
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| tap | 点击 cell 时触发 | - |
|
||||
| click | 点击 cell 时触发 | - |
|
||||
|
||||
### Cell Slot
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Component({
|
||||
center: Boolean,
|
||||
isLink: Boolean,
|
||||
required: Boolean,
|
||||
tapable: Boolean,
|
||||
clickable: Boolean,
|
||||
titleWidth: String,
|
||||
customStyle: String,
|
||||
arrowDirection: String,
|
||||
@ -36,11 +36,12 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap() {
|
||||
onClick() {
|
||||
const { url } = this.data;
|
||||
if (url) {
|
||||
wx[this.data.linkType]({ url });
|
||||
}
|
||||
this.triggerEvent('click');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--tapable {
|
||||
&--clickable {
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<view
|
||||
class="custom-class van-cell {{ center ? 'van-cell--center' : '' }} {{ required ? 'van-cell--required' : '' }} {{ isLink || tapable ? 'van-cell--tapable' : '' }} {{ border ? 'van-hairline' : '' }}"
|
||||
class="custom-class van-cell {{ center ? 'van-cell--center' : '' }} {{ required ? 'van-cell--required' : '' }} {{ isLink || clickable ? 'van-cell--clickable' : '' }} {{ border ? 'van-hairline' : '' }}"
|
||||
style="{{ customStyle }}"
|
||||
bind:tap="onTap"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<van-icon wx:if="{{ icon }}" custom-class="van-cell__left-icon left-icon-class" name="{{ icon }}" />
|
||||
<slot wx:else name="icon" />
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
Component({
|
||||
properties: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
// 是否有遮罩层
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
// 遮罩层是否会显示
|
||||
showOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
// 内容从哪个方向出，可选 center top bottom left right
|
||||
type: {
|
||||
type: String,
|
||||
value: 'center'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMaskClick() {
|
||||
this.triggerEvent('clickmask', {});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
.pop {
|
||||
visibility: hidden;
|
||||
}
|
||||
.pop--show {
|
||||
visibility: visible;
|
||||
}
|
||||
.pop__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
}
|
||||
.pop__mask--hide {
|
||||
background: transparent;
|
||||
}
|
||||
.pop__container {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transform-origin: center;
|
||||
transition: all 0.4s ease;
|
||||
z-index: 11;
|
||||
opacity: 0;
|
||||
}
|
||||
.pop--show .pop__container {
|
||||
opacity: 1;
|
||||
}
|
||||
.pop--show .pop__mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 显示方向 */
|
||||
/* 左侧popup */
|
||||
.pop--left .pop__container {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
.pop--show.pop--left .pop__container {
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
/* 右侧popup */
|
||||
.pop--right .pop__container {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
left: auto;
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
.pop--show.pop--right .pop__container {
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
/* 底部popup */
|
||||
.pop--bottom .pop__container {
|
||||
top: auto;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
.pop--show.pop--bottom .pop__container {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
/* 顶部popup */
|
||||
.pop--top .pop__container {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -100%, 0);
|
||||
}
|
||||
.pop--show.pop--top .pop__container {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
<view
|
||||
class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}"
|
||||
>
|
||||
<view
|
||||
wx:if="{{ overlay }}"
|
||||
class="pop__mask {{ showOverlay ? '' : 'pop__mask--hide' }}"
|
||||
bindtap="handleMaskClick"
|
||||
></view>
|
||||
<view class="pop__container">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
@ -35,7 +35,7 @@
|
||||
label="用户名"
|
||||
icon="question"
|
||||
placeholder="请输入用户名"
|
||||
bind:tap-icon="onTapIcon"
|
||||
bind:click-icon="onClickIcon"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
@ -154,7 +154,7 @@
|
||||
| input | 输入内容时触发 | value: 当前输入值 |
|
||||
| change | 输入内容时触发 | value: 当前输入值 |
|
||||
| confirm | 点击完成按钮时触发 | value: 当前输入值 |
|
||||
| tap-icon | 点击尾部图标时触发 | - |
|
||||
| click-icon | 点击尾部图标时触发 | - |
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
|
||||
|
||||
@ -97,8 +97,8 @@ Component({
|
||||
});
|
||||
},
|
||||
|
||||
onTapIcon() {
|
||||
this.triggerEvent('tap-icon');
|
||||
onClickIcon() {
|
||||
this.triggerEvent('click-icon');
|
||||
},
|
||||
|
||||
getShowClear(options) {
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
custom-class="van-field__clear"
|
||||
bind:touchstart="onClear"
|
||||
/>
|
||||
<view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onTapIcon">
|
||||
<view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onClickIcon">
|
||||
<van-icon
|
||||
wx:if="{{ icon }}"
|
||||
name="{{ icon }}"
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| tap | 点击图标时触发 | - |
|
||||
| click | 点击图标时触发 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
|
||||
@ -6,5 +6,11 @@ Component({
|
||||
name: String,
|
||||
size: String,
|
||||
color: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.triggerEvent('click');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<view
|
||||
class="custom-class van-icon van-icon-{{ name }}"
|
||||
style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
|
||||
</view>
|
||||
|
||||
@ -17,18 +17,18 @@ Vue.use(NavBar);
|
||||
left-text="返回"
|
||||
right-text="按钮"
|
||||
left-arrow
|
||||
bind:tap-left="onTapLeft"
|
||||
bind:tap-right="onTapRight"
|
||||
bind:click-left="onClickLeft"
|
||||
bind:click-right="onClickRight"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onTapLeft() {
|
||||
onClickLeft() {
|
||||
wx.showToast({ title: '点击返回', icon: 'none' });
|
||||
},
|
||||
onTapRight() {
|
||||
onClickRight() {
|
||||
wx.showToast({ title: '点击按钮', icon: 'none' });
|
||||
}
|
||||
}
|
||||
@ -68,8 +68,8 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| tap-left | 点击左侧按钮时触发 | - |
|
||||
| tap-right | 点击右侧按钮时触发 | - |
|
||||
| click-left | 点击左侧按钮时触发 | - |
|
||||
| click-right | 点击右侧按钮时触发 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
|
||||
@ -21,12 +21,12 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTapLeft() {
|
||||
this.triggerEvent('tap-left');
|
||||
onClickLeft() {
|
||||
this.triggerEvent('click-left');
|
||||
},
|
||||
|
||||
onTapRight() {
|
||||
this.triggerEvent('tap-right');
|
||||
onClickRight() {
|
||||
this.triggerEvent('click-right');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
class="custom-class van-nav-bar van-hairline--bottom {{ fixed ? 'van-nav-bar--fixed' : '' }}"
|
||||
style="z-index: {{ zIndex }}"
|
||||
>
|
||||
<view class="van-nav-bar__left" bind:tap="onTapLeft">
|
||||
<view class="van-nav-bar__left" bind:tap="onClickLeft">
|
||||
<block wx:if="{{ leftArrow || leftText }}">
|
||||
<van-icon
|
||||
wx:if="{{ leftArrow }}"
|
||||
@ -17,7 +17,7 @@
|
||||
<block wx:if="{{ title }}">{{ title }}</block>
|
||||
<slot wx:else name="title" />
|
||||
</view>
|
||||
<view class="van-nav-bar__right" bind:tap="onTapRight">
|
||||
<view class="van-nav-bar__right" bind:tap="onClickRight">
|
||||
<view wx:if="{{ rightText }}" class="van-nav-bar__text">{{ rightText }}</view>
|
||||
<slot wx:else name="right" />
|
||||
</view>
|
||||
|
||||
@ -65,8 +65,7 @@
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| tap | 点击事件回调 | - |
|
||||
|
||||
| click | 点击事件回调 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
|
||||
@ -170,8 +170,8 @@ Component({
|
||||
});
|
||||
},
|
||||
|
||||
onTap(event) {
|
||||
this.triggerEvent('tap', event);
|
||||
onClick(event) {
|
||||
this.triggerEvent('click', event);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
wx:if="{{ show }}"
|
||||
class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
|
||||
style="color: {{ color }};background-color: {{ backgroundColor }}"
|
||||
bind:tap="onTap"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
|
||||
<image src="{{ leftIcon }}" />
|
||||
@ -18,7 +18,7 @@
|
||||
wx:if="{{ mode === 'closeable' }}"
|
||||
class="van-notice-bar__right-icon"
|
||||
name="close"
|
||||
bindtap="_handleButtonClick"
|
||||
bind:tap="_handleButtonClick"
|
||||
/>
|
||||
<navigator
|
||||
wx:if="{{ mode === 'link' }}"
|
||||
|
||||
@ -12,7 +12,7 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTap() {
|
||||
onClick() {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
const checked = !this.data.checked;
|
||||
this.triggerEvent('input', checked);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<view
|
||||
class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
|
||||
style="font-size: {{ size }};"
|
||||
bind:tap="onTap"
|
||||
bind:tap="Click"
|
||||
>
|
||||
<view class="van-switch__node node-class">
|
||||
<van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
|
||||
|
||||
@ -16,23 +16,24 @@
|
||||
items="{{ items }}"
|
||||
main-active-index="{{ mainActiveIndex }}"
|
||||
active-id="{{ activeId }}"
|
||||
bind:navclick="onNavClick"
|
||||
bind:itemclick="onItemClick"
|
||||
bind:click-nav="onClickNav"
|
||||
bind:click-item="onClickItem"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
// ...
|
||||
},
|
||||
|
||||
onNavClick({ detail = {} }) {
|
||||
onClickNav({ detail = {} }) {
|
||||
this.setData({
|
||||
mainActiveIndex: detail.index || 0
|
||||
});
|
||||
},
|
||||
|
||||
onItemClick({ detail = {} }) {
|
||||
onClickItem({ detail = {} }) {
|
||||
this.setData({
|
||||
activeId: detail.id
|
||||
});
|
||||
@ -50,10 +51,10 @@ Page({
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
|
||||
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
|
||||
| click-nav | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
|
||||
| click-item | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
|
||||
|
||||
### 数据格式
|
||||
#### items 分类显示所需数据的数据结构
|
||||
|
||||
@ -38,19 +38,19 @@ Component({
|
||||
|
||||
methods: {
|
||||
// 当一个子项被选择时
|
||||
onItemSelect(event) {
|
||||
onSelectItem(event) {
|
||||
const {
|
||||
dataset = {}
|
||||
} = event.currentTarget || {};
|
||||
this.triggerEvent('itemclick', { ...(dataset.item || {}) });
|
||||
this.triggerEvent('click-item', { ...(dataset.item || {}) });
|
||||
},
|
||||
|
||||
// 当一个导航被点击时
|
||||
handleNavClick(event) {
|
||||
onClickNav(event) {
|
||||
const {
|
||||
dataset = {}
|
||||
} = event.currentTarget || {};
|
||||
this.triggerEvent('navclick', { index: dataset.index });
|
||||
this.triggerEvent('click-nav', { index: dataset.index });
|
||||
},
|
||||
|
||||
// 更新子项列表
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
wx:key="index"
|
||||
class="tree-select__nitem van-ellipsis {{ mainActiveIndex === index ? 'tree-select__nitem--active' : '' }}"
|
||||
data-index="{{ index }}"
|
||||
bindtap="handleNavClick"
|
||||
bind:tap="onClickNav"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
@ -22,7 +22,7 @@
|
||||
wx:key="id"
|
||||
class="tree-select__item van-ellipsis {{ activeId === item.id ? 'tree-select__item--active' : '' }}"
|
||||
data-item="{{ item }}"
|
||||
bindtap="onItemSelect"
|
||||
bind:tap="onSelectItem"
|
||||
>
|
||||
{{ item.text }}
|
||||
<van-icon
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user