mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
feat: add DropdownMenu、DropdownItem component (#2181)
This commit is contained in:
aphasic
neverland
parent
02dee88899
commit
dd5d76dbb4
2
dist/action-sheet/index.wxss
vendored
2
dist/action-sheet/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-action-sheet{max-height:90%!important;color:#333;color:var(--text-color,#333)}.van-action-sheet__cancel,.van-action-sheet__item{height:50px;font-size:16px;line-height:50px;text-align:center;background-color:#fff;background-color:var(--white,#fff)}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel{height:60px}.van-action-sheet__cancel:before{display:block;height:10px;content:" ";background-color:#f8f8f8;background-color:var(--background-color,#f8f8f8)}.van-action-sheet__item--disabled{color:#c9c9c9;color:var(--gray,#c9c9c9)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--white,#fff)}.van-action-sheet__subname{margin-left:5px;font-size:12px;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-action-sheet__header{font-weight:500;font-size:16px;line-height:44px;text-align:center}.van-action-sheet__description{padding:16px;color:#7d7e80;font-size:14px;line-height:20px;text-align:center}.van-action-sheet__close{position:absolute!important;top:0;right:0;padding:0 15px;font-size:18px!important;line-height:inherit!important;color:#999;color:var(--gray-dark,#999)}
|
||||
@import '../common/index.wxss';.van-action-sheet{max-height:90%!important;color:#333;color:var(--action-sheet-item-text-color,#333)}.van-action-sheet__cancel,.van-action-sheet__item{font-size:16px;line-height:50px;text-align:center;background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel{height:50px}.van-action-sheet__cancel:before{display:block;height:8px;content:" ";background-color:#f8f8f8;background-color:var(--action-sheet-cancel-padding-color,#f8f8f8)}.van-action-sheet__item--disabled{color:#c9c9c9;color:var(--action-sheet-item-disabled-text-color,#c9c9c9)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{margin-left:4px;font-size:12px;color:#7d7e80;color:var(--action-sheet-subname-color,#7d7e80)}.van-action-sheet__header{font-weight:500;font-size:16px;line-height:44px;text-align:center}.van-action-sheet__description{padding:16px;color:#7d7e80;font-size:14px;line-height:20px;text-align:center}.van-action-sheet__close{position:absolute!important;top:0;right:0;padding:0 12px;font-size:18px!important;line-height:inherit!important;color:#999;color:var(--action-sheet-close-icon-color,#999)}
|
||||
2
dist/button/index.wxss
vendored
2
dist/button/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;vertical-align:middle;transition:opacity .2s;border-radius:2px;border-radius:var(--button-border-radius,2px);-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#333;color:var(--button-default-color,#333);background-color:#fff;background-color:var(--button-default-background-color,#fff);border:1px solid #eee;border:1px solid var(--button-default-border-color,#eee)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background-color:#07c160;background-color:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:1px solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background-color:#1989fa;background-color:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:1px solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background-color:#ee0a24;background-color:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:1px solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background-color:#ff976a;background-color:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:1px solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background-color:#fff;background-color:var(--white,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{min-width:60px;height:30px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__text{display:inline}.van-button__loading-text{display:inline-block;margin-left:5px;vertical-align:middle}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button__icon+.van-button__text:not(:empty){display:inline-block;margin-left:5px;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--hairline.van-button--square:after{border-radius:0}
|
||||
@import '../common/index.wxss';.van-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;vertical-align:middle;transition:opacity .2s;border-radius:2px;border-radius:var(--button-border-radius,2px);-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#333;color:var(--button-default-color,#333);background-color:#fff;background-color:var(--button-default-background-color,#fff);border:1px solid #eee;border:1px solid var(--button-default-border-color,#eee)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background-color:#07c160;background-color:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:1px solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background-color:#1989fa;background-color:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:1px solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background-color:#ee0a24;background-color:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:1px solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background-color:#ff976a;background-color:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:1px solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background-color:#fff;background-color:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{min-width:60px;height:30px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__text{display:inline}.van-button__loading-text{display:inline-block;margin-left:5px;vertical-align:middle}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button__icon+.van-button__text:not(:empty){display:inline-block;margin-left:5px;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--hairline.van-button--square:after{border-radius:0}
|
||||
2
dist/card/index.wxss
vendored
2
dist/card/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-card{position:relative;box-sizing:border-box;padding:5px 15px;font-size:12px;color:#333;color:var(--text-color,#333);background-color:#fafafa;background-color:var(--background-color-light,#fafafa)}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;-webkit-flex:none;flex:none;width:90px;height:90px;margin-right:10px}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;-webkit-flex:1;flex:1;min-width:0}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:16px}.van-card__desc{color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-card__bottom,.van-card__desc{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#ee0a24;color:var(--red,#ee0a24)}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;text-decoration:line-through;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{-webkit-flex:none;flex:none;width:100%;text-align:right}
|
||||
@import '../common/index.wxss';.van-card{position:relative;box-sizing:border-box;padding:8px 16px;font-size:12px;color:#333;color:var(--card-text-color,#333);background-color:#fafafa;background-color:var(--card-background-color,#fafafa)}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;-webkit-flex:none;flex:none;width:90px;height:90px;margin-right:8px}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;-webkit-flex:1;flex:1;min-width:0}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:16px}.van-card__desc{color:#7d7e80;color:var(--card-desc-color,#7d7e80)}.van-card__bottom,.van-card__desc{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#ee0a24;color:var(--card-price-color,#ee0a24)}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;text-decoration:line-through;color:#7d7e80;color:var(--card-origin-price-color,#7d7e80)}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{-webkit-flex:none;flex:none;width:100%;text-align:right}
|
||||
2
dist/dialog/index.wxss
vendored
2
dist/dialog/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-dialog{top:45%!important;width:320px;overflow:hidden;font-size:16px;border-radius:4px;background-color:#fff;background-color:var(--white,#fff)}@media (max-width:321px){.van-dialog{width:90%}}.van-dialog__header{padding-top:25px;font-weight:500;line-height:24px;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{max-height:60vh;padding:25px;overflow-y:auto;font-size:14px;line-height:20px;text-align:center;-webkit-overflow-scrolling:touch}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
|
||||
@import '../common/index.wxss';.van-dialog{top:45%!important;width:320px;overflow:hidden;font-size:16px;border-radius:16px;background-color:#fff;background-color:var(--white,#fff)}@media (max-width:321px){.van-dialog{width:90%}}.van-dialog__header{padding-top:25px;font-weight:500;line-height:24px;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{max-height:60vh;padding:25px;overflow-y:auto;font-size:14px;line-height:20px;text-align:center;-webkit-overflow-scrolling:touch}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
|
||||
1
dist/dropdown-item/index.d.ts
vendored
Normal file
1
dist/dropdown-item/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
70
dist/dropdown-item/index.js
vendored
Normal file
70
dist/dropdown-item/index.js
vendored
Normal file
@ -0,0 +1,70 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
VantComponent({
|
||||
field: true,
|
||||
relation: {
|
||||
name: 'dropdown-menu',
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
},
|
||||
unlinked() {
|
||||
this.parent = null;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: null,
|
||||
title: String,
|
||||
disabled: Boolean,
|
||||
titleClass: String,
|
||||
options: {
|
||||
type: Array,
|
||||
value: []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
transition: true,
|
||||
showPopup: false,
|
||||
showWrapper: false,
|
||||
displayTitle: ''
|
||||
},
|
||||
created() {
|
||||
this.setData({ displayTitle: this.computedDisplayTitle(this.data.value) });
|
||||
},
|
||||
methods: {
|
||||
computedDisplayTitle(curValue) {
|
||||
const { title, options } = this.data;
|
||||
if (title) {
|
||||
return title;
|
||||
}
|
||||
const match = options.filter(option => option.value === curValue);
|
||||
const displayTitle = match.length ? match[0].text : '';
|
||||
return displayTitle;
|
||||
},
|
||||
onClickOverlay() {
|
||||
this.toggle();
|
||||
this.$emit('close');
|
||||
},
|
||||
onOptionTap(event) {
|
||||
let { value, displayTitle } = this.data;
|
||||
const { option } = event.currentTarget.dataset;
|
||||
const { value: optionValue } = option;
|
||||
if (optionValue !== value) {
|
||||
value = optionValue;
|
||||
displayTitle = this.computedDisplayTitle(optionValue);
|
||||
this.$emit('change', optionValue);
|
||||
}
|
||||
this.setData({ showPopup: false, value, displayTitle });
|
||||
const time = this.data.duration || 0;
|
||||
setTimeout(() => {
|
||||
this.setData({ showWrapper: false });
|
||||
}, time);
|
||||
// parent 中的 itemListData 是 children 上的数据的集合
|
||||
// 数据的更新由 children 各自维护，但是模板的更新需要额外触发 parent 的 setData
|
||||
this.parent.setData({ itemListData: this.parent.data.itemListData });
|
||||
},
|
||||
toggle() {
|
||||
const { childIndex } = this.data;
|
||||
this.parent.toggleItem(childIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
8
dist/dropdown-item/index.json
vendored
Normal file
8
dist/dropdown-item/index.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-popup": "../popup/index",
|
||||
"van-cell": "../cell/index",
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
||||
44
dist/dropdown-item/index.wxml
vendored
Normal file
44
dist/dropdown-item/index.wxml
vendored
Normal file
@ -0,0 +1,44 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
wx:if="{{ showWrapper }}"
|
||||
class="{{ utils.bem('dropdown-item', direction) }}"
|
||||
style="{{ wrapperStyle }}"
|
||||
>
|
||||
<van-popup
|
||||
show="{{ showPopup }}"
|
||||
custom-style="position: absolute;"
|
||||
overlay-style="position: absolute;"
|
||||
overlay="{{ overlay }}"
|
||||
position="{{ direction === 'down' ? 'top' : 'bottom' }}"
|
||||
duration="{{ transition ? duration : 0 }}"
|
||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||
bind:close="onClickOverlay"
|
||||
>
|
||||
<van-cell
|
||||
wx:for="{{ options }}"
|
||||
wx:key="{{ item.value }}"
|
||||
data-option="{{ item }}"
|
||||
class="{{ utils.bem('dropdown-item__option', { active: item.value === value } ) }}"
|
||||
clickable
|
||||
icon="{{ item.icon }}"
|
||||
bind:tap="onOptionTap"
|
||||
>
|
||||
<view
|
||||
slot="title"
|
||||
class="van-dropdown-item__title"
|
||||
style="{{ item.value === value ? 'color:' + activeColor : '' }}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
<van-icon
|
||||
wx:if="{{ item.value === value }}"
|
||||
name="success"
|
||||
class="van-dropdown-item__icon"
|
||||
color="{{ activeColor }}"
|
||||
/>
|
||||
</van-cell>
|
||||
|
||||
<slot />
|
||||
</van-popup>
|
||||
</view>
|
||||
1
dist/dropdown-item/index.wxss
vendored
Normal file
1
dist/dropdown-item/index.wxss
vendored
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-dropdown-item{position:fixed;right:0;left:0;overflow:hidden}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active .van-dropdown-item__icon,.van-dropdown-item__option--active .van-dropdown-item__title{color:#1989fa}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__icon{display:block;line-height:inherit}
|
||||
1
dist/dropdown-menu/index.d.ts
vendored
Normal file
1
dist/dropdown-menu/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
148
dist/dropdown-menu/index.js
vendored
Normal file
148
dist/dropdown-menu/index.js
vendored
Normal file
@ -0,0 +1,148 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { addUnit } from '../common/utils';
|
||||
let ARRAY = [];
|
||||
VantComponent({
|
||||
field: true,
|
||||
relation: {
|
||||
name: 'dropdown-item',
|
||||
type: 'descendant',
|
||||
linked(target) {
|
||||
this.children = this.children || [];
|
||||
// 透传 props 给 dropdown-item
|
||||
const { overlay, duration, activeColor, closeOnClickOverlay, direction } = this.data;
|
||||
this.updateChildData(target, {
|
||||
overlay,
|
||||
duration,
|
||||
activeColor,
|
||||
closeOnClickOverlay,
|
||||
direction,
|
||||
childIndex: this.children.length
|
||||
});
|
||||
this.children.push(target);
|
||||
// 收集 dorpdown-item 的 data 挂在 data 上
|
||||
target &&
|
||||
this.setData({
|
||||
itemListData: this.data.itemListData.concat([target.data])
|
||||
});
|
||||
},
|
||||
unlinked(target) {
|
||||
this.children = this.children.filter((child) => child !== target);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
activeColor: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 10
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 200
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'down'
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
data: {
|
||||
itemListData: []
|
||||
},
|
||||
created() {
|
||||
ARRAY.push(this);
|
||||
},
|
||||
destroyed() {
|
||||
ARRAY = ARRAY.filter(item => item !== this);
|
||||
},
|
||||
methods: {
|
||||
updateChildData(childItem, newData, needRefreshList = false) {
|
||||
childItem.setData(newData);
|
||||
if (needRefreshList) {
|
||||
// dropdown-item data 更新，涉及到 title 的展示，触发模板更新
|
||||
this.setData({ itemListData: this.data.itemListData });
|
||||
}
|
||||
},
|
||||
toggleItem(active) {
|
||||
this.children.forEach((item, index) => {
|
||||
const { showPopup } = item.data;
|
||||
if (index === active) {
|
||||
this.toggleChildItem(item);
|
||||
}
|
||||
else if (showPopup) {
|
||||
this.toggleChildItem(item, false, { immediate: true });
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleChildItem(childItem, show, options = {}) {
|
||||
const { showPopup, duration } = childItem.data;
|
||||
if (show === undefined)
|
||||
show = !showPopup;
|
||||
if (show === showPopup) {
|
||||
return;
|
||||
}
|
||||
const newChildData = { transition: !options.immediate, showPopup: show };
|
||||
if (!show) {
|
||||
const time = options.immediate ? 0 : duration;
|
||||
this.updateChildData(childItem, Object.assign({}, newChildData), true);
|
||||
setTimeout(() => {
|
||||
this.updateChildData(childItem, { showWrapper: false }, true);
|
||||
}, time);
|
||||
return;
|
||||
}
|
||||
this.getChildWrapperStyle().then((wrapperStyle = '') => {
|
||||
this.updateChildData(childItem, Object.assign(Object.assign({}, newChildData), { wrapperStyle, showWrapper: true }), true);
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.children.forEach((item) => {
|
||||
this.toggleChildItem(item, false, { immediate: true });
|
||||
});
|
||||
},
|
||||
getChildWrapperStyle() {
|
||||
const { windowHeight } = wx.getSystemInfoSync();
|
||||
const { zIndex, direction } = this.data;
|
||||
let offset = 0;
|
||||
return this.getRect('.van-dropdown-menu').then(rect => {
|
||||
const { top = 0, bottom = 0 } = rect;
|
||||
if (direction === 'down') {
|
||||
offset = bottom;
|
||||
}
|
||||
else {
|
||||
offset = windowHeight - top;
|
||||
}
|
||||
let wrapperStyle = `z-index: ${zIndex};`;
|
||||
if (direction === 'down') {
|
||||
wrapperStyle += `top: ${addUnit(offset)};`;
|
||||
}
|
||||
else {
|
||||
wrapperStyle += `bottom: ${addUnit(offset)};`;
|
||||
}
|
||||
return Promise.resolve(wrapperStyle);
|
||||
});
|
||||
},
|
||||
onTitleTap(event) {
|
||||
// item ---> dropdown-item
|
||||
const { item, index } = event.currentTarget.dataset;
|
||||
if (!item.disabled) {
|
||||
// menuItem ---> dropdown-menu
|
||||
ARRAY.forEach(menuItem => {
|
||||
if (menuItem && menuItem.data.closeOnClickOutside && menuItem !== this) {
|
||||
menuItem.close();
|
||||
}
|
||||
});
|
||||
this.toggleItem(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
3
dist/dropdown-menu/index.json
vendored
Normal file
3
dist/dropdown-menu/index.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
23
dist/dropdown-menu/index.wxml
vendored
Normal file
23
dist/dropdown-menu/index.wxml
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-dropdown-menu van-dropdown-menu--top-bottom">
|
||||
<view
|
||||
wx:for="{{ itemListData }}"
|
||||
wx:key="index"
|
||||
data-item="{{ item }}"
|
||||
data-index="{{ index }}"
|
||||
class="{{ utils.bem('dropdown-menu__item', { disabled: item.disabled }) }}"
|
||||
bind:tap="onTitleTap"
|
||||
>
|
||||
<view
|
||||
class="{{ item.titleClass }} {{ utils.bem('dropdown-menu__title', { active: item.showPopup, down: item.showPopup === (direction === 'down') }) }}"
|
||||
style="{{ item.showPopup ? 'color:' + activeColor : '' }}"
|
||||
>
|
||||
<view class="van-ellipsis">
|
||||
{{item.displayTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot />
|
||||
</view>
|
||||
1
dist/dropdown-menu/index.wxss
vendored
Normal file
1
dist/dropdown-menu/index.wxss
vendored
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-dropdown-menu{display:-webkit-flex;display:flex;height:50px;background-color:#fff;-webkit-user-select:none;user-select:none}.van-dropdown-menu__item{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-width:0}.van-dropdown-menu__item:active{opacity:.7}.van-dropdown-menu__item--disabled:active{opacity:1}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:#999}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:0 8px;color:#333;font-size:15px;line-height:18px}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:#1989fa}.van-dropdown-menu__title--down:after{margin-top:-1px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}
|
||||
1
dist/image/index.d.ts
vendored
Normal file
1
dist/image/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
91
dist/image/index.js
vendored
Normal file
91
dist/image/index.js
vendored
Normal file
@ -0,0 +1,91 @@
|
||||
import { addUnit, isDef } from '../common/utils';
|
||||
import { VantComponent } from '../common/component';
|
||||
import { button } from '../mixins/button';
|
||||
import { openType } from '../mixins/open-type';
|
||||
VantComponent({
|
||||
mixins: [button, openType],
|
||||
classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
|
||||
props: {
|
||||
src: String,
|
||||
width: String,
|
||||
height: String,
|
||||
fit: {
|
||||
type: String,
|
||||
value: 'fill'
|
||||
},
|
||||
round: Boolean,
|
||||
lazyLoad: Boolean,
|
||||
showError: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showMenuByLongpress: Boolean,
|
||||
// 受小程序slot限制所需要的属性
|
||||
useLoadingSlot: Boolean,
|
||||
useErrorSlot: Boolean,
|
||||
},
|
||||
data: {
|
||||
fitWeapp: 'aspectFit',
|
||||
FIT_MODE_MAP: {
|
||||
contain: 'aspectFit',
|
||||
cover: 'aspectFill',
|
||||
fill: 'scaleToFill',
|
||||
none: 'center',
|
||||
// TODO: 这个没有原生的属性，需要后面实现，暂时先用contain;
|
||||
'scale-down': 'aspectFit'
|
||||
},
|
||||
loading: true,
|
||||
error: false
|
||||
},
|
||||
watch: {
|
||||
src() {
|
||||
this.setData({
|
||||
loading: true,
|
||||
error: false
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const { FIT_MODE_MAP, fit } = this.data;
|
||||
this.setData({
|
||||
mode: FIT_MODE_MAP[fit],
|
||||
style: this.getStyle(),
|
||||
});
|
||||
},
|
||||
getStyle() {
|
||||
const { width, height } = this.data;
|
||||
let style = '';
|
||||
if (isDef(width)) {
|
||||
style += `width: ${addUnit(width)};`;
|
||||
}
|
||||
if (isDef(height)) {
|
||||
style += `height: ${addUnit(height)};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
onLoad(event) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
this.$emit('load', event.detail);
|
||||
},
|
||||
onError(event) {
|
||||
this.setData({
|
||||
loading: false,
|
||||
error: true,
|
||||
});
|
||||
this.$emit('error', event.detail);
|
||||
},
|
||||
onClick(event) {
|
||||
this.$emit('click', event.detail);
|
||||
},
|
||||
}
|
||||
});
|
||||
7
dist/image/index.json
vendored
Normal file
7
dist/image/index.json
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index",
|
||||
"van-loading": "../loading/index"
|
||||
}
|
||||
}
|
||||
47
dist/image/index.wxml
vendored
Normal file
47
dist/image/index.wxml
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ utils.bem('image', { round })}}"
|
||||
style="{{ style }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<image
|
||||
wx:if="{{ !error }}"
|
||||
class="image-class van-image__img"
|
||||
mode="{{ mode }}"
|
||||
src="{{ src }}"
|
||||
lazy-load="{{ lazyLoad }}"
|
||||
show-menu-by-longpress="{{ showMenuByLongpress }}"
|
||||
bind:load="onLoad"
|
||||
bind:error="onError"
|
||||
/>
|
||||
|
||||
<div
|
||||
wx:if="{{ loading && showLoading }}"
|
||||
class="loading-class van-image__loading"
|
||||
>
|
||||
<slot
|
||||
wx:if="{{ useLoadingSlot }}"
|
||||
name="loading"
|
||||
/>
|
||||
<van-icon
|
||||
wx:else
|
||||
name="photo-o"
|
||||
size="22"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
wx:if="{{ error && showError }}"
|
||||
class="error-class van-image__error"
|
||||
>
|
||||
<slot
|
||||
wx:if="{{ useErrorSlot }}"
|
||||
name="error"
|
||||
/>
|
||||
<van-icon
|
||||
wx:else
|
||||
name="warning-o"
|
||||
size="22"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
1
dist/image/index.wxss
vendored
Normal file
1
dist/image/index.wxss
vendored
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:50%}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#999;font-size:14px;background-color:#f8f8f8}
|
||||
5
dist/progress/index.js
vendored
5
dist/progress/index.js
vendored
@ -7,6 +7,7 @@ VantComponent({
|
||||
percentage: Number,
|
||||
pivotText: String,
|
||||
pivotColor: String,
|
||||
trackColor: String,
|
||||
showPivot: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
@ -15,10 +16,6 @@ VantComponent({
|
||||
type: String,
|
||||
value: BLUE
|
||||
},
|
||||
trackColor: {
|
||||
type: String,
|
||||
value: "#e5e5e5",
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
value: '#fff'
|
||||
|
||||
5
dist/progress/index.wxml
vendored
5
dist/progress/index.wxml
vendored
@ -1,6 +1,9 @@
|
||||
<wxs src="./index.wxs" module="getters" />
|
||||
|
||||
<view class="van-progress custom-class" style="height: {{ strokeWidthUnit }}; background: {{trackColor}};">
|
||||
<view
|
||||
class="van-progress custom-class"
|
||||
style="height: {{ strokeWidthUnit }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
|
||||
>
|
||||
<view
|
||||
class="van-progress__portion"
|
||||
style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
|
||||
|
||||
67
dist/stepper/index.wxml
vendored
67
dist/stepper/index.wxml
vendored
@ -1,37 +1,38 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-stepper custom-class">
|
||||
<view
|
||||
wx:if="{{ showMinus }}"
|
||||
data-type="minus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || value <= min }) }}"
|
||||
hover-class="van-stepper__minus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
|
||||
style="{{ inputStyle }}"
|
||||
value="{{ value }}"
|
||||
focus="{{ focus }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
bindinput="onInput"
|
||||
bind:focus="onFocus"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showPlus }}"
|
||||
data-type="plus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || value >= max }) }}"
|
||||
hover-class="van-stepper__plus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showMinus }}"
|
||||
data-type="minus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || value <= min }) }}"
|
||||
hover-class="van-stepper__minus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
|
||||
style="{{ inputStyle }}"
|
||||
value="{{ value }}"
|
||||
focus="{{ focus }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
bindinput="onInput"
|
||||
bind:focus="onFocus"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showPlus }}"
|
||||
data-type="plus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || value >= max }) }}"
|
||||
hover-class="van-stepper__plus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
</view>
|
||||
|
||||
|
||||
20
dist/steps/index.wxml
vendored
20
dist/steps/index.wxml
vendored
@ -13,13 +13,25 @@
|
||||
</view>
|
||||
<view class="van-step__circle-container">
|
||||
<block wx:if="{{ index !== active }}">
|
||||
<van-icon wx:if="{{ inactiveIcon }}" name="{{ inactiveIcon }}" color="#969799" size="12px" />
|
||||
<view wx:else class="van-step__circle" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
|
||||
<van-icon
|
||||
wx:if="{{ inactiveIcon }}"
|
||||
color="#969799"
|
||||
name="{{ inactiveIcon }}"
|
||||
custom-class="van-step__icon"
|
||||
/>
|
||||
<view
|
||||
wx:else
|
||||
class="van-step__circle"
|
||||
style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__active" />
|
||||
<van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
|
||||
</view>
|
||||
<view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
|
||||
<view
|
||||
wx:if="{{ index !== steps.length - 1 }}"
|
||||
class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
2
dist/steps/index.wxss
vendored
2
dist/steps/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff;background-color:var(--white,#fff)}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:-webkit-flex;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;-webkit-flex:1;flex:1;font-size:14px;color:#999;color:var(--gray-dark,#999)}.van-step--finish{color:#333;color:var(--text-color,#333)}.van-step__circle{width:5px;height:5px;border-radius:50%;background-color:#999;background-color:var(--gray-dark,#999)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;padding:0 8px;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0);background-color:#fff;background-color:var(--white,#fff)}.van-step--horizontal .van-step__title{display:inline-block;font-size:12px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);background-color:#eee;background-color:var(--border-color,#eee)}.van-step--horizontal.van-step--process{color:#333;color:var(--text-color,#333)}.van-step--horizontal.van-step--process .van-step__active{display:block;font-size:12px;line-height:1}.van-step--vertical{padding:10px 10px 10px 0;font-size:14px;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;content:"";background-color:#fff;background-color:var(--white,#fff)}.van-step--vertical .van-step__active,.van-step--vertical .van-step__circle,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__active{font-size:12px;line-height:1}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);background-color:#eee;background-color:var(--border-color,#eee)}
|
||||
@import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff;background-color:var(--white,#fff)}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:-webkit-flex;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;-webkit-flex:1;flex:1;font-size:14px;color:#999;color:var(--gray-dark,#999)}.van-step--finish{color:#333;color:var(--text-color,#333)}.van-step__circle{width:5px;height:5px;border-radius:50%;background-color:#999;background-color:var(--gray-dark,#999)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;padding:0 8px;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0);background-color:#fff;background-color:var(--white,#fff)}.van-step--horizontal .van-step__title{display:inline-block;font-size:12px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);background-color:#eee;background-color:var(--border-color,#eee)}.van-step--horizontal.van-step--process{color:#333;color:var(--text-color,#333)}.van-step--horizontal.van-step--process .van-step__icon{display:block;font-size:12px;line-height:1}.van-step--vertical{padding:10px 10px 10px 0;font-size:14px;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;content:"";background-color:#fff;background-color:var(--white,#fff)}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__icon{font-size:12px;line-height:1}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);background-color:#eee;background-color:var(--border-color,#eee)}
|
||||
2
dist/switch/index.wxss
vendored
2
dist/switch/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-switch{position:relative;display:inline-block;box-sizing:initial;width:2em;width:var(--switch-width,2em);height:1em;height:var(--switch-height,1em);background-color:#fff;background-color:var(--switch-background-color,#fff);border:1px solid rgba(0,0,0,.1);border:var(--switch-border,1px solid rgba(0,0,0,.1));border-radius:1em;border-radius:var(--switch-node-size,1em);transition:background-color .3s;transition:background-color var(--switch-transition-duration,.3s)}.van-switch__node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;z-index:var(--switch-node-z-index,1);width:1em;width:var(--switch-node-size,1em);height:1em;height:var(--switch-node-size,1em);background-color:#fff;background-color:var(--switch-node-background-color,#fff);box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;transition:-webkit-transform var(--switch-transition-duration,.3s);transition:transform var(--switch-transition-duration,.3s);transition:transform var(--switch-transition-duration,.3s),-webkit-transform var(--switch-transition-duration,.3s)}.van-switch__loading{position:absolute!important;top:25%;left:25%}.van-switch--on{background-color:#1989fa;background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em);-webkit-transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity,.4)}
|
||||
@import '../common/index.wxss';.van-switch{position:relative;display:inline-block;box-sizing:initial;width:2em;width:var(--switch-width,2em);height:1em;height:var(--switch-height,1em);background-color:#fff;background-color:var(--switch-background-color,#fff);border:1px solid rgba(0,0,0,.1);border:var(--switch-border,1px solid rgba(0,0,0,.1));border-radius:1em;border-radius:var(--switch-node-size,1em);transition:background-color .3s;transition:background-color var(--switch-transition-duration,.3s)}.van-switch__node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;z-index:var(--switch-node-z-index,1);width:1em;width:var(--switch-node-size,1em);height:1em;height:var(--switch-node-size,1em);background-color:#fff;background-color:var(--switch-node-background-color,#fff);box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05),-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:-webkit-transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);transition:transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);transition:transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05),-webkit-transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05)}.van-switch__loading{position:absolute!important;top:25%;left:25%}.van-switch--on{background-color:#1989fa;background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em);-webkit-transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity,.4)}
|
||||
@ -43,7 +43,8 @@
|
||||
"pages/picker/index",
|
||||
"pages/overlay/index",
|
||||
"pages/circle/index",
|
||||
"pages/grid/index"
|
||||
"pages/grid/index",
|
||||
"pages/dropdown-menu/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#f8f8f8",
|
||||
@ -108,7 +109,9 @@
|
||||
"van-overlay": "./dist/overlay/index",
|
||||
"van-circle": "./dist/circle/index",
|
||||
"van-grid": "./dist/grid/index",
|
||||
"van-grid-item": "./dist/grid-item/index"
|
||||
"van-grid-item": "./dist/grid-item/index",
|
||||
"van-dropdown-menu": "./dist/dropdown-menu/index",
|
||||
"van-dropdown-item": "./dist/dropdown-item/index"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json"
|
||||
}
|
||||
|
||||
@ -91,6 +91,10 @@ export default [
|
||||
path: '/dialog',
|
||||
title: 'Dialog 弹出框'
|
||||
},
|
||||
{
|
||||
path: '/dropdown-menu',
|
||||
title: 'DropdownMenu 下拉菜单'
|
||||
},
|
||||
{
|
||||
path: '/loading',
|
||||
title: 'Loading 加载'
|
||||
|
||||
35
example/pages/dropdown-menu/index.js
Normal file
35
example/pages/dropdown-menu/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
switchTitle1: '包邮',
|
||||
switchTitle2: '团购',
|
||||
itemTitle: '筛选',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' }
|
||||
],
|
||||
switch1: true,
|
||||
switch2: false,
|
||||
value1: 0,
|
||||
value2: 'a'
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.selectComponent('#item').toggle();
|
||||
},
|
||||
|
||||
onSwitch1Change ({ detail }) {
|
||||
this.setData({ switch1: detail });
|
||||
},
|
||||
|
||||
onSwitch2Change ({ detail }) {
|
||||
this.setData({ switch2: detail });
|
||||
}
|
||||
});
|
||||
3
example/pages/dropdown-menu/index.json
Normal file
3
example/pages/dropdown-menu/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "Dropdown Menu"
|
||||
}
|
||||
57
example/pages/dropdown-menu/index.wxml
Normal file
57
example/pages/dropdown-menu/index.wxml
Normal file
@ -0,0 +1,57 @@
|
||||
<demo-block custom-class="white" title="基础用法" padding>
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block custom-class="white" title="自定义菜单内容" padding>
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item id="item" title="{{ itemTitle }}">
|
||||
<van-cell title="{{ switchTitle1 }}">
|
||||
<van-switch
|
||||
slot="right-icon"
|
||||
size="24px"
|
||||
style="height: 26px"
|
||||
checked="{{ switch1 }}"
|
||||
bind:change="onSwitch1Change"
|
||||
/>
|
||||
</van-cell>
|
||||
<van-cell title="{{ switchTitle2 }}">
|
||||
<van-switch
|
||||
slot="right-icon"
|
||||
size="24px"
|
||||
style="height: 26px"
|
||||
checked="{{ switch2 }}"
|
||||
bind:change="onSwitch2Change"
|
||||
/>
|
||||
</van-cell>
|
||||
<van-button type="info" block bind:click="onConfirm">
|
||||
确定
|
||||
</van-button>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block custom-class="white" title="自定义选中状态颜色" padding>
|
||||
<van-dropdown-menu active-color="#ee0a24">
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block custom-class="white" title="向上展开" padding>
|
||||
<van-dropdown-menu direction="up">
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block custom-class="white" title="禁用菜单" padding>
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
3
example/pages/dropdown-menu/index.wxss
Normal file
3
example/pages/dropdown-menu/index.wxss
Normal file
@ -0,0 +1,3 @@
|
||||
page {
|
||||
background-color: white;
|
||||
}
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-action-sheet{max-height:90%!important;color:#333;color:var(--text-color,#333)}.van-action-sheet__cancel,.van-action-sheet__item{height:50px;font-size:16px;line-height:50px;text-align:center;background-color:#fff;background-color:var(--white,#fff)}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel{height:60px}.van-action-sheet__cancel:before{display:block;height:10px;content:" ";background-color:#f8f8f8;background-color:var(--background-color,#f8f8f8)}.van-action-sheet__item--disabled{color:#c9c9c9;color:var(--gray,#c9c9c9)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--white,#fff)}.van-action-sheet__subname{margin-left:5px;font-size:12px;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-action-sheet__header{font-weight:500;font-size:16px;line-height:44px;text-align:center}.van-action-sheet__description{padding:16px;color:#7d7e80;font-size:14px;line-height:20px;text-align:center}.van-action-sheet__close{position:absolute!important;top:0;right:0;padding:0 15px;font-size:18px!important;line-height:inherit!important;color:#999;color:var(--gray-dark,#999)}
|
||||
@import '../common/index.wxss';.van-action-sheet{max-height:90%!important;color:#333;color:var(--action-sheet-item-text-color,#333)}.van-action-sheet__cancel,.van-action-sheet__item{font-size:16px;line-height:50px;text-align:center;background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel{height:50px}.van-action-sheet__cancel:before{display:block;height:8px;content:" ";background-color:#f8f8f8;background-color:var(--action-sheet-cancel-padding-color,#f8f8f8)}.van-action-sheet__item--disabled{color:#c9c9c9;color:var(--action-sheet-item-disabled-text-color,#c9c9c9)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{margin-left:4px;font-size:12px;color:#7d7e80;color:var(--action-sheet-subname-color,#7d7e80)}.van-action-sheet__header{font-weight:500;font-size:16px;line-height:44px;text-align:center}.van-action-sheet__description{padding:16px;color:#7d7e80;font-size:14px;line-height:20px;text-align:center}.van-action-sheet__close{position:absolute!important;top:0;right:0;padding:0 12px;font-size:18px!important;line-height:inherit!important;color:#999;color:var(--action-sheet-close-icon-color,#999)}
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;vertical-align:middle;transition:opacity .2s;border-radius:2px;border-radius:var(--button-border-radius,2px);-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#333;color:var(--button-default-color,#333);background-color:#fff;background-color:var(--button-default-background-color,#fff);border:1px solid #eee;border:1px solid var(--button-default-border-color,#eee)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background-color:#07c160;background-color:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:1px solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background-color:#1989fa;background-color:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:1px solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background-color:#ee0a24;background-color:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:1px solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background-color:#ff976a;background-color:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:1px solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background-color:#fff;background-color:var(--white,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{min-width:60px;height:30px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__text{display:inline}.van-button__loading-text{display:inline-block;margin-left:5px;vertical-align:middle}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button__icon+.van-button__text:not(:empty){display:inline-block;margin-left:5px;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--hairline.van-button--square:after{border-radius:0}
|
||||
@import '../common/index.wxss';.van-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;vertical-align:middle;transition:opacity .2s;border-radius:2px;border-radius:var(--button-border-radius,2px);-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#333;color:var(--button-default-color,#333);background-color:#fff;background-color:var(--button-default-background-color,#fff);border:1px solid #eee;border:1px solid var(--button-default-border-color,#eee)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background-color:#07c160;background-color:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:1px solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background-color:#1989fa;background-color:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:1px solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background-color:#ee0a24;background-color:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:1px solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background-color:#ff976a;background-color:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:1px solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background-color:#fff;background-color:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{min-width:60px;height:30px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__text{display:inline}.van-button__loading-text{display:inline-block;margin-left:5px;vertical-align:middle}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button__icon+.van-button__text:not(:empty){display:inline-block;margin-left:5px;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:10em;border-radius:var(--button-round-border-radius,10em)}.van-button--hairline.van-button--square:after{border-radius:0}
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-card{position:relative;box-sizing:border-box;padding:5px 15px;font-size:12px;color:#333;color:var(--text-color,#333);background-color:#fafafa;background-color:var(--background-color-light,#fafafa)}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;-webkit-flex:none;flex:none;width:90px;height:90px;margin-right:10px}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;-webkit-flex:1;flex:1;min-width:0}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:16px}.van-card__desc{color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-card__bottom,.van-card__desc{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#ee0a24;color:var(--red,#ee0a24)}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;text-decoration:line-through;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{-webkit-flex:none;flex:none;width:100%;text-align:right}
|
||||
@import '../common/index.wxss';.van-card{position:relative;box-sizing:border-box;padding:8px 16px;font-size:12px;color:#333;color:var(--card-text-color,#333);background-color:#fafafa;background-color:var(--card-background-color,#fafafa)}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;-webkit-flex:none;flex:none;width:90px;height:90px;margin-right:8px}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;-webkit-flex:1;flex:1;min-width:0}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:16px}.van-card__desc{color:#7d7e80;color:var(--card-desc-color,#7d7e80)}.van-card__bottom,.van-card__desc{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#ee0a24;color:var(--card-price-color,#ee0a24)}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;text-decoration:line-through;color:#7d7e80;color:var(--card-origin-price-color,#7d7e80)}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{-webkit-flex:none;flex:none;width:100%;text-align:right}
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-dialog{top:45%!important;width:320px;overflow:hidden;font-size:16px;border-radius:4px;background-color:#fff;background-color:var(--white,#fff)}@media (max-width:321px){.van-dialog{width:90%}}.van-dialog__header{padding-top:25px;font-weight:500;line-height:24px;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{max-height:60vh;padding:25px;overflow-y:auto;font-size:14px;line-height:20px;text-align:center;-webkit-overflow-scrolling:touch}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
|
||||
@import '../common/index.wxss';.van-dialog{top:45%!important;width:320px;overflow:hidden;font-size:16px;border-radius:16px;background-color:#fff;background-color:var(--white,#fff)}@media (max-width:321px){.van-dialog{width:90%}}.van-dialog__header{padding-top:25px;font-weight:500;line-height:24px;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{max-height:60vh;padding:25px;overflow-y:auto;font-size:14px;line-height:20px;text-align:center;-webkit-overflow-scrolling:touch}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80;color:var(--gray-darker,#7d7e80)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
|
||||
73
lib/dropdown-item/index.js
Normal file
73
lib/dropdown-item/index.js
Normal file
@ -0,0 +1,73 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var component_1 = require("../common/component");
|
||||
component_1.VantComponent({
|
||||
field: true,
|
||||
relation: {
|
||||
name: 'dropdown-menu',
|
||||
type: 'ancestor',
|
||||
linked: function (target) {
|
||||
this.parent = target;
|
||||
},
|
||||
unlinked: function () {
|
||||
this.parent = null;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: null,
|
||||
title: String,
|
||||
disabled: Boolean,
|
||||
titleClass: String,
|
||||
options: {
|
||||
type: Array,
|
||||
value: []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
transition: true,
|
||||
showPopup: false,
|
||||
showWrapper: false,
|
||||
displayTitle: ''
|
||||
},
|
||||
created: function () {
|
||||
this.setData({ displayTitle: this.computedDisplayTitle(this.data.value) });
|
||||
},
|
||||
methods: {
|
||||
computedDisplayTitle: function (curValue) {
|
||||
var _a = this.data, title = _a.title, options = _a.options;
|
||||
if (title) {
|
||||
return title;
|
||||
}
|
||||
var match = options.filter(function (option) { return option.value === curValue; });
|
||||
var displayTitle = match.length ? match[0].text : '';
|
||||
return displayTitle;
|
||||
},
|
||||
onClickOverlay: function () {
|
||||
this.toggle();
|
||||
this.$emit('close');
|
||||
},
|
||||
onOptionTap: function (event) {
|
||||
var _this = this;
|
||||
var _a = this.data, value = _a.value, displayTitle = _a.displayTitle;
|
||||
var option = event.currentTarget.dataset.option;
|
||||
var optionValue = option.value;
|
||||
if (optionValue !== value) {
|
||||
value = optionValue;
|
||||
displayTitle = this.computedDisplayTitle(optionValue);
|
||||
this.$emit('change', optionValue);
|
||||
}
|
||||
this.setData({ showPopup: false, value: value, displayTitle: displayTitle });
|
||||
var time = this.data.duration || 0;
|
||||
setTimeout(function () {
|
||||
_this.setData({ showWrapper: false });
|
||||
}, time);
|
||||
// parent 中的 itemListData 是 children 上的数据的集合
|
||||
// 数据的更新由 children 各自维护，但是模板的更新需要额外触发 parent 的 setData
|
||||
this.parent.setData({ itemListData: this.parent.data.itemListData });
|
||||
},
|
||||
toggle: function () {
|
||||
var childIndex = this.data.childIndex;
|
||||
this.parent.toggleItem(childIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
8
lib/dropdown-item/index.json
Normal file
8
lib/dropdown-item/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-popup": "../popup/index",
|
||||
"van-cell": "../cell/index",
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
||||
44
lib/dropdown-item/index.wxml
Normal file
44
lib/dropdown-item/index.wxml
Normal file
@ -0,0 +1,44 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
wx:if="{{ showWrapper }}"
|
||||
class="{{ utils.bem('dropdown-item', direction) }}"
|
||||
style="{{ wrapperStyle }}"
|
||||
>
|
||||
<van-popup
|
||||
show="{{ showPopup }}"
|
||||
custom-style="position: absolute;"
|
||||
overlay-style="position: absolute;"
|
||||
overlay="{{ overlay }}"
|
||||
position="{{ direction === 'down' ? 'top' : 'bottom' }}"
|
||||
duration="{{ transition ? duration : 0 }}"
|
||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||
bind:close="onClickOverlay"
|
||||
>
|
||||
<van-cell
|
||||
wx:for="{{ options }}"
|
||||
wx:key="{{ item.value }}"
|
||||
data-option="{{ item }}"
|
||||
class="{{ utils.bem('dropdown-item__option', { active: item.value === value } ) }}"
|
||||
clickable
|
||||
icon="{{ item.icon }}"
|
||||
bind:tap="onOptionTap"
|
||||
>
|
||||
<view
|
||||
slot="title"
|
||||
class="van-dropdown-item__title"
|
||||
style="{{ item.value === value ? 'color:' + activeColor : '' }}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
<van-icon
|
||||
wx:if="{{ item.value === value }}"
|
||||
name="success"
|
||||
class="van-dropdown-item__icon"
|
||||
color="{{ activeColor }}"
|
||||
/>
|
||||
</van-cell>
|
||||
|
||||
<slot />
|
||||
</van-popup>
|
||||
</view>
|
||||
1
lib/dropdown-item/index.wxss
Normal file
1
lib/dropdown-item/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-dropdown-item{position:fixed;right:0;left:0;overflow:hidden}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active .van-dropdown-item__icon,.van-dropdown-item__option--active .van-dropdown-item__title{color:#1989fa}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__icon{display:block;line-height:inherit}
|
||||
169
lib/dropdown-menu/index.js
Normal file
169
lib/dropdown-menu/index.js
Normal file
@ -0,0 +1,169 @@
|
||||
"use strict";
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var component_1 = require("../common/component");
|
||||
var utils_1 = require("../common/utils");
|
||||
var ARRAY = [];
|
||||
component_1.VantComponent({
|
||||
field: true,
|
||||
relation: {
|
||||
name: 'dropdown-item',
|
||||
type: 'descendant',
|
||||
linked: function (target) {
|
||||
this.children = this.children || [];
|
||||
// 透传 props 给 dropdown-item
|
||||
var _a = this.data, overlay = _a.overlay, duration = _a.duration, activeColor = _a.activeColor, closeOnClickOverlay = _a.closeOnClickOverlay, direction = _a.direction;
|
||||
this.updateChildData(target, {
|
||||
overlay: overlay,
|
||||
duration: duration,
|
||||
activeColor: activeColor,
|
||||
closeOnClickOverlay: closeOnClickOverlay,
|
||||
direction: direction,
|
||||
childIndex: this.children.length
|
||||
});
|
||||
this.children.push(target);
|
||||
// 收集 dorpdown-item 的 data 挂在 data 上
|
||||
target &&
|
||||
this.setData({
|
||||
itemListData: this.data.itemListData.concat([target.data])
|
||||
});
|
||||
},
|
||||
unlinked: function (target) {
|
||||
this.children = this.children.filter(function (child) { return child !== target; });
|
||||
}
|
||||
},
|
||||
props: {
|
||||
activeColor: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 10
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 200
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'down'
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
data: {
|
||||
itemListData: []
|
||||
},
|
||||
created: function () {
|
||||
ARRAY.push(this);
|
||||
},
|
||||
destroyed: function () {
|
||||
var _this = this;
|
||||
ARRAY = ARRAY.filter(function (item) { return item !== _this; });
|
||||
},
|
||||
methods: {
|
||||
updateChildData: function (childItem, newData, needRefreshList) {
|
||||
if (needRefreshList === void 0) { needRefreshList = false; }
|
||||
childItem.setData(newData);
|
||||
if (needRefreshList) {
|
||||
// dropdown-item data 更新，涉及到 title 的展示，触发模板更新
|
||||
this.setData({ itemListData: this.data.itemListData });
|
||||
}
|
||||
},
|
||||
toggleItem: function (active) {
|
||||
var _this = this;
|
||||
this.children.forEach(function (item, index) {
|
||||
var showPopup = item.data.showPopup;
|
||||
if (index === active) {
|
||||
_this.toggleChildItem(item);
|
||||
}
|
||||
else if (showPopup) {
|
||||
_this.toggleChildItem(item, false, { immediate: true });
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleChildItem: function (childItem, show, options) {
|
||||
var _this = this;
|
||||
if (options === void 0) { options = {}; }
|
||||
var _a = childItem.data, showPopup = _a.showPopup, duration = _a.duration;
|
||||
if (show === undefined)
|
||||
show = !showPopup;
|
||||
if (show === showPopup) {
|
||||
return;
|
||||
}
|
||||
var newChildData = { transition: !options.immediate, showPopup: show };
|
||||
if (!show) {
|
||||
var time = options.immediate ? 0 : duration;
|
||||
this.updateChildData(childItem, __assign({}, newChildData), true);
|
||||
setTimeout(function () {
|
||||
_this.updateChildData(childItem, { showWrapper: false }, true);
|
||||
}, time);
|
||||
return;
|
||||
}
|
||||
this.getChildWrapperStyle().then(function (wrapperStyle) {
|
||||
if (wrapperStyle === void 0) { wrapperStyle = ''; }
|
||||
_this.updateChildData(childItem, __assign(__assign({}, newChildData), { wrapperStyle: wrapperStyle, showWrapper: true }), true);
|
||||
});
|
||||
},
|
||||
close: function () {
|
||||
var _this = this;
|
||||
this.children.forEach(function (item) {
|
||||
_this.toggleChildItem(item, false, { immediate: true });
|
||||
});
|
||||
},
|
||||
getChildWrapperStyle: function () {
|
||||
var windowHeight = wx.getSystemInfoSync().windowHeight;
|
||||
var _a = this.data, zIndex = _a.zIndex, direction = _a.direction;
|
||||
var offset = 0;
|
||||
return this.getRect('.van-dropdown-menu').then(function (rect) {
|
||||
var _a = rect.top, top = _a === void 0 ? 0 : _a, _b = rect.bottom, bottom = _b === void 0 ? 0 : _b;
|
||||
if (direction === 'down') {
|
||||
offset = bottom;
|
||||
}
|
||||
else {
|
||||
offset = windowHeight - top;
|
||||
}
|
||||
var wrapperStyle = "z-index: " + zIndex + ";";
|
||||
if (direction === 'down') {
|
||||
wrapperStyle += "top: " + utils_1.addUnit(offset) + ";";
|
||||
}
|
||||
else {
|
||||
wrapperStyle += "bottom: " + utils_1.addUnit(offset) + ";";
|
||||
}
|
||||
return Promise.resolve(wrapperStyle);
|
||||
});
|
||||
},
|
||||
onTitleTap: function (event) {
|
||||
var _this = this;
|
||||
// item ---> dropdown-item
|
||||
var _a = event.currentTarget.dataset, item = _a.item, index = _a.index;
|
||||
if (!item.disabled) {
|
||||
// menuItem ---> dropdown-menu
|
||||
ARRAY.forEach(function (menuItem) {
|
||||
if (menuItem && menuItem.data.closeOnClickOutside && menuItem !== _this) {
|
||||
menuItem.close();
|
||||
}
|
||||
});
|
||||
this.toggleItem(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
3
lib/dropdown-menu/index.json
Normal file
3
lib/dropdown-menu/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
23
lib/dropdown-menu/index.wxml
Normal file
23
lib/dropdown-menu/index.wxml
Normal file
@ -0,0 +1,23 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-dropdown-menu van-dropdown-menu--top-bottom">
|
||||
<view
|
||||
wx:for="{{ itemListData }}"
|
||||
wx:key="index"
|
||||
data-item="{{ item }}"
|
||||
data-index="{{ index }}"
|
||||
class="{{ utils.bem('dropdown-menu__item', { disabled: item.disabled }) }}"
|
||||
bind:tap="onTitleTap"
|
||||
>
|
||||
<view
|
||||
class="{{ item.titleClass }} {{ utils.bem('dropdown-menu__title', { active: item.showPopup, down: item.showPopup === (direction === 'down') }) }}"
|
||||
style="{{ item.showPopup ? 'color:' + activeColor : '' }}"
|
||||
>
|
||||
<view class="van-ellipsis">
|
||||
{{item.displayTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot />
|
||||
</view>
|
||||
1
lib/dropdown-menu/index.wxss
Normal file
1
lib/dropdown-menu/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-dropdown-menu{display:-webkit-flex;display:flex;height:50px;background-color:#fff;-webkit-user-select:none;user-select:none}.van-dropdown-menu__item{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-width:0}.van-dropdown-menu__item:active{opacity:.7}.van-dropdown-menu__item--disabled:active{opacity:1}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:#999}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:0 8px;color:#333;font-size:15px;line-height:18px}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:#1989fa}.van-dropdown-menu__title--down:after{margin-top:-1px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}
|
||||
93
lib/image/index.js
Normal file
93
lib/image/index.js
Normal file
@ -0,0 +1,93 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var utils_1 = require("../common/utils");
|
||||
var component_1 = require("../common/component");
|
||||
var button_1 = require("../mixins/button");
|
||||
var open_type_1 = require("../mixins/open-type");
|
||||
component_1.VantComponent({
|
||||
mixins: [button_1.button, open_type_1.openType],
|
||||
classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
|
||||
props: {
|
||||
src: String,
|
||||
width: String,
|
||||
height: String,
|
||||
fit: {
|
||||
type: String,
|
||||
value: 'fill'
|
||||
},
|
||||
round: Boolean,
|
||||
lazyLoad: Boolean,
|
||||
showError: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showMenuByLongpress: Boolean,
|
||||
// 受小程序slot限制所需要的属性
|
||||
useLoadingSlot: Boolean,
|
||||
useErrorSlot: Boolean,
|
||||
},
|
||||
data: {
|
||||
fitWeapp: 'aspectFit',
|
||||
FIT_MODE_MAP: {
|
||||
contain: 'aspectFit',
|
||||
cover: 'aspectFill',
|
||||
fill: 'scaleToFill',
|
||||
none: 'center',
|
||||
// TODO: 这个没有原生的属性，需要后面实现，暂时先用contain;
|
||||
'scale-down': 'aspectFit'
|
||||
},
|
||||
loading: true,
|
||||
error: false
|
||||
},
|
||||
watch: {
|
||||
src: function () {
|
||||
this.setData({
|
||||
loading: true,
|
||||
error: false
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init: function () {
|
||||
var _a = this.data, FIT_MODE_MAP = _a.FIT_MODE_MAP, fit = _a.fit;
|
||||
this.setData({
|
||||
mode: FIT_MODE_MAP[fit],
|
||||
style: this.getStyle(),
|
||||
});
|
||||
},
|
||||
getStyle: function () {
|
||||
var _a = this.data, width = _a.width, height = _a.height;
|
||||
var style = '';
|
||||
if (utils_1.isDef(width)) {
|
||||
style += "width: " + utils_1.addUnit(width) + ";";
|
||||
}
|
||||
if (utils_1.isDef(height)) {
|
||||
style += "height: " + utils_1.addUnit(height) + ";";
|
||||
}
|
||||
return style;
|
||||
},
|
||||
onLoad: function (event) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
this.$emit('load', event.detail);
|
||||
},
|
||||
onError: function (event) {
|
||||
this.setData({
|
||||
loading: false,
|
||||
error: true,
|
||||
});
|
||||
this.$emit('error', event.detail);
|
||||
},
|
||||
onClick: function (event) {
|
||||
this.$emit('click', event.detail);
|
||||
},
|
||||
}
|
||||
});
|
||||
7
lib/image/index.json
Normal file
7
lib/image/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index",
|
||||
"van-loading": "../loading/index"
|
||||
}
|
||||
}
|
||||
47
lib/image/index.wxml
Normal file
47
lib/image/index.wxml
Normal file
@ -0,0 +1,47 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ utils.bem('image', { round })}}"
|
||||
style="{{ style }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<image
|
||||
wx:if="{{ !error }}"
|
||||
class="image-class van-image__img"
|
||||
mode="{{ mode }}"
|
||||
src="{{ src }}"
|
||||
lazy-load="{{ lazyLoad }}"
|
||||
show-menu-by-longpress="{{ showMenuByLongpress }}"
|
||||
bind:load="onLoad"
|
||||
bind:error="onError"
|
||||
/>
|
||||
|
||||
<div
|
||||
wx:if="{{ loading && showLoading }}"
|
||||
class="loading-class van-image__loading"
|
||||
>
|
||||
<slot
|
||||
wx:if="{{ useLoadingSlot }}"
|
||||
name="loading"
|
||||
/>
|
||||
<van-icon
|
||||
wx:else
|
||||
name="photo-o"
|
||||
size="22"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
wx:if="{{ error && showError }}"
|
||||
class="error-class van-image__error"
|
||||
>
|
||||
<slot
|
||||
wx:if="{{ useErrorSlot }}"
|
||||
name="error"
|
||||
/>
|
||||
<van-icon
|
||||
wx:else
|
||||
name="warning-o"
|
||||
size="22"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
1
lib/image/index.wxss
Normal file
1
lib/image/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:50%}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#999;font-size:14px;background-color:#f8f8f8}
|
||||
@ -9,6 +9,7 @@ component_1.VantComponent({
|
||||
percentage: Number,
|
||||
pivotText: String,
|
||||
pivotColor: String,
|
||||
trackColor: String,
|
||||
showPivot: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<wxs src="./index.wxs" module="getters" />
|
||||
|
||||
<view class="van-progress custom-class" style="height: {{ strokeWidthUnit }};">
|
||||
<view
|
||||
class="van-progress custom-class"
|
||||
style="height: {{ strokeWidthUnit }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
|
||||
>
|
||||
<view
|
||||
class="van-progress__portion"
|
||||
style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
|
||||
|
||||
@ -1,37 +1,38 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-stepper custom-class">
|
||||
<view
|
||||
wx:if="{{ showMinus }}"
|
||||
data-type="minus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || value <= min }) }}"
|
||||
hover-class="van-stepper__minus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
|
||||
style="{{ inputStyle }}"
|
||||
value="{{ value }}"
|
||||
focus="{{ focus }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
bindinput="onInput"
|
||||
bind:focus="onFocus"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showPlus }}"
|
||||
data-type="plus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || value >= max }) }}"
|
||||
hover-class="van-stepper__plus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showMinus }}"
|
||||
data-type="minus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || value <= min }) }}"
|
||||
hover-class="van-stepper__minus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
|
||||
style="{{ inputStyle }}"
|
||||
value="{{ value }}"
|
||||
focus="{{ focus }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
bindinput="onInput"
|
||||
bind:focus="onFocus"
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showPlus }}"
|
||||
data-type="plus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || value >= max }) }}"
|
||||
hover-class="van-stepper__plus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
</view>
|
||||
|
||||
|
||||
@ -13,13 +13,25 @@
|
||||
</view>
|
||||
<view class="van-step__circle-container">
|
||||
<block wx:if="{{ index !== active }}">
|
||||
<van-icon wx:if="{{ inactiveIcon }}" name="{{ inactiveIcon }}" color="#969799" size="12px" />
|
||||
<view wx:else class="van-step__circle" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
|
||||
<van-icon
|
||||
wx:if="{{ inactiveIcon }}"
|
||||
color="#969799"
|
||||
name="{{ inactiveIcon }}"
|
||||
custom-class="van-step__icon"
|
||||
/>
|
||||
<view
|
||||
wx:else
|
||||
class="van-step__circle"
|
||||
style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__active" />
|
||||
<van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
|
||||
</view>
|
||||
<view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
|
||||
<view
|
||||
wx:if="{{ index !== steps.length - 1 }}"
|
||||
class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff;background-color:var(--white,#fff)}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:-webkit-flex;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;-webkit-flex:1;flex:1;font-size:14px;color:#999;color:var(--gray-dark,#999)}.van-step--finish{color:#333;color:var(--text-color,#333)}.van-step__circle{width:5px;height:5px;border-radius:50%;background-color:#999;background-color:var(--gray-dark,#999)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;padding:0 8px;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0);background-color:#fff;background-color:var(--white,#fff)}.van-step--horizontal .van-step__title{display:inline-block;font-size:12px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);background-color:#eee;background-color:var(--border-color,#eee)}.van-step--horizontal.van-step--process{color:#333;color:var(--text-color,#333)}.van-step--horizontal.van-step--process .van-step__active{display:block;font-size:12px;line-height:1}.van-step--vertical{padding:10px 10px 10px 0;font-size:14px;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;content:"";background-color:#fff;background-color:var(--white,#fff)}.van-step--vertical .van-step__active,.van-step--vertical .van-step__circle,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__active{font-size:12px;line-height:1}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);background-color:#eee;background-color:var(--border-color,#eee)}
|
||||
@import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff;background-color:var(--white,#fff)}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:-webkit-flex;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;-webkit-flex:1;flex:1;font-size:14px;color:#999;color:var(--gray-dark,#999)}.van-step--finish{color:#333;color:var(--text-color,#333)}.van-step__circle{width:5px;height:5px;border-radius:50%;background-color:#999;background-color:var(--gray-dark,#999)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;padding:0 8px;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0);background-color:#fff;background-color:var(--white,#fff)}.van-step--horizontal .van-step__title{display:inline-block;font-size:12px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);background-color:#eee;background-color:var(--border-color,#eee)}.van-step--horizontal.van-step--process{color:#333;color:var(--text-color,#333)}.van-step--horizontal.van-step--process .van-step__icon{display:block;font-size:12px;line-height:1}.van-step--vertical{padding:10px 10px 10px 0;font-size:14px;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;content:"";background-color:#fff;background-color:var(--white,#fff)}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__icon{font-size:12px;line-height:1}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);background-color:#eee;background-color:var(--border-color,#eee)}
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-switch{position:relative;display:inline-block;box-sizing:initial;width:2em;width:var(--switch-width,2em);height:1em;height:var(--switch-height,1em);background-color:#fff;background-color:var(--switch-background-color,#fff);border:1px solid rgba(0,0,0,.1);border:var(--switch-border,1px solid rgba(0,0,0,.1));border-radius:1em;border-radius:var(--switch-node-size,1em);transition:background-color .3s;transition:background-color var(--switch-transition-duration,.3s)}.van-switch__node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;z-index:var(--switch-node-z-index,1);width:1em;width:var(--switch-node-size,1em);height:1em;height:var(--switch-node-size,1em);background-color:#fff;background-color:var(--switch-node-background-color,#fff);box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;transition:-webkit-transform var(--switch-transition-duration,.3s);transition:transform var(--switch-transition-duration,.3s);transition:transform var(--switch-transition-duration,.3s),-webkit-transform var(--switch-transition-duration,.3s)}.van-switch__loading{position:absolute!important;top:25%;left:25%}.van-switch--on{background-color:#1989fa;background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em);-webkit-transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity,.4)}
|
||||
@import '../common/index.wxss';.van-switch{position:relative;display:inline-block;box-sizing:initial;width:2em;width:var(--switch-width,2em);height:1em;height:var(--switch-height,1em);background-color:#fff;background-color:var(--switch-background-color,#fff);border:1px solid rgba(0,0,0,.1);border:var(--switch-border,1px solid rgba(0,0,0,.1));border-radius:1em;border-radius:var(--switch-node-size,1em);transition:background-color .3s;transition:background-color var(--switch-transition-duration,.3s)}.van-switch__node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;z-index:var(--switch-node-z-index,1);width:1em;width:var(--switch-node-size,1em);height:1em;height:var(--switch-node-size,1em);background-color:#fff;background-color:var(--switch-node-background-color,#fff);box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05),-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:-webkit-transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);transition:transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);transition:transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05),-webkit-transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05)}.van-switch__loading{position:absolute!important;top:25%;left:25%}.van-switch--on{background-color:#1989fa;background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em);-webkit-transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity,.4)}
|
||||
@ -278,3 +278,14 @@
|
||||
@divider-content-padding: @padding-md;
|
||||
@divider-content-left-width: 10%;
|
||||
@divider-content-right-width: 10%;
|
||||
|
||||
// DropdownMenu
|
||||
@dropdown-menu-height: 50px;
|
||||
@dropdown-menu-background-color: @white;
|
||||
@dropdown-menu-title-font-size: 15px;
|
||||
@dropdown-menu-title-text-color: @text-color;
|
||||
@dropdown-menu-title-active-text-color: @blue;
|
||||
@dropdown-menu-title-disabled-text-color: @gray-dark;
|
||||
@dropdown-menu-title-padding: 0 @padding-xs;
|
||||
@dropdown-menu-title-line-height: 18px;
|
||||
@dropdown-menu-option-active-color: @blue;
|
||||
|
||||
8
packages/dropdown-item/index.json
Normal file
8
packages/dropdown-item/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-popup": "../popup/index",
|
||||
"van-cell": "../cell/index",
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
||||
32
packages/dropdown-item/index.less
Normal file
32
packages/dropdown-item/index.less
Normal file
@ -0,0 +1,32 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-dropdown-item {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&__option {
|
||||
text-align: left;
|
||||
|
||||
&--active {
|
||||
.van-dropdown-item__title,
|
||||
.van-dropdown-item__icon {
|
||||
color: @dropdown-menu-option-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--up {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--down {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: block;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
85
packages/dropdown-item/index.ts
Normal file
85
packages/dropdown-item/index.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { Weapp } from 'definitions/weapp';
|
||||
|
||||
VantComponent({
|
||||
field: true,
|
||||
|
||||
relation: {
|
||||
name: 'dropdown-menu',
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
},
|
||||
unlinked() {
|
||||
this.parent = null;
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
value: null,
|
||||
title: String,
|
||||
disabled: Boolean,
|
||||
titleClass: String,
|
||||
options: {
|
||||
type: Array,
|
||||
value: []
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
transition: true,
|
||||
showPopup: false,
|
||||
showWrapper: false,
|
||||
displayTitle: ''
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setData({ displayTitle: this.computedDisplayTitle(this.data.value) });
|
||||
},
|
||||
|
||||
methods: {
|
||||
computedDisplayTitle(curValue) {
|
||||
const { title, options } = this.data;
|
||||
|
||||
if (title) {
|
||||
return title;
|
||||
}
|
||||
|
||||
const match = options.filter(option => option.value === curValue);
|
||||
const displayTitle = match.length ? match[0].text : '';
|
||||
return displayTitle;
|
||||
},
|
||||
|
||||
onClickOverlay() {
|
||||
this.toggle();
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
onOptionTap(event: Weapp.Event) {
|
||||
let { value, displayTitle } = this.data;
|
||||
const { option } = event.currentTarget.dataset;
|
||||
const { value: optionValue } = option;
|
||||
|
||||
if (optionValue !== value) {
|
||||
value = optionValue;
|
||||
displayTitle = this.computedDisplayTitle(optionValue);
|
||||
this.$emit('change', optionValue);
|
||||
}
|
||||
this.setData({ showPopup: false, value, displayTitle });
|
||||
|
||||
const time = this.data.duration || 0;
|
||||
setTimeout(() => {
|
||||
this.setData({ showWrapper: false });
|
||||
}, time);
|
||||
|
||||
// parent 中的 itemListData 是 children 上的数据的集合
|
||||
// 数据的更新由 children 各自维护，但是模板的更新需要额外触发 parent 的 setData
|
||||
this.parent.setData({ itemListData: this.parent.data.itemListData });
|
||||
},
|
||||
|
||||
toggle() {
|
||||
const { childIndex } = this.data;
|
||||
this.parent.toggleItem(childIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
44
packages/dropdown-item/index.wxml
Normal file
44
packages/dropdown-item/index.wxml
Normal file
@ -0,0 +1,44 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
wx:if="{{ showWrapper }}"
|
||||
class="{{ utils.bem('dropdown-item', direction) }}"
|
||||
style="{{ wrapperStyle }}"
|
||||
>
|
||||
<van-popup
|
||||
show="{{ showPopup }}"
|
||||
custom-style="position: absolute;"
|
||||
overlay-style="position: absolute;"
|
||||
overlay="{{ overlay }}"
|
||||
position="{{ direction === 'down' ? 'top' : 'bottom' }}"
|
||||
duration="{{ transition ? duration : 0 }}"
|
||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||
bind:close="onClickOverlay"
|
||||
>
|
||||
<van-cell
|
||||
wx:for="{{ options }}"
|
||||
wx:key="{{ item.value }}"
|
||||
data-option="{{ item }}"
|
||||
class="{{ utils.bem('dropdown-item__option', { active: item.value === value } ) }}"
|
||||
clickable
|
||||
icon="{{ item.icon }}"
|
||||
bind:tap="onOptionTap"
|
||||
>
|
||||
<view
|
||||
slot="title"
|
||||
class="van-dropdown-item__title"
|
||||
style="{{ item.value === value ? 'color:' + activeColor : '' }}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
<van-icon
|
||||
wx:if="{{ item.value === value }}"
|
||||
name="success"
|
||||
class="van-dropdown-item__icon"
|
||||
color="{{ activeColor }}"
|
||||
/>
|
||||
</van-cell>
|
||||
|
||||
<slot />
|
||||
</van-popup>
|
||||
</view>
|
||||
179
packages/dropdown-menu/README.md
Normal file
179
packages/dropdown-menu/README.md
Normal file
@ -0,0 +1,179 @@
|
||||
# DropdownMenu 下拉菜单
|
||||
|
||||
### 介绍
|
||||
|
||||
下拉菜单
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-dropdown-menu": "path/to/vant-weapp/dist/dropdown-menu/index",
|
||||
"van-dropdown-item": "path/to/vant-weapp/dist/dropdown-item/index"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' }
|
||||
],
|
||||
value1: 0,
|
||||
value2: 'a'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 自定义菜单内容
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item id="item" title="{{ itemTitle }}">
|
||||
<van-cell title="{{ switchTitle1 }}">
|
||||
<van-switch
|
||||
slot="right-icon"
|
||||
size="24px"
|
||||
style="height: 26px"
|
||||
checked="{{ switch1 }}"
|
||||
bind:change="onSwitch1Change"
|
||||
/>
|
||||
</van-cell>
|
||||
<van-cell title="{{ switchTitle2 }}">
|
||||
<van-switch
|
||||
slot="right-icon"
|
||||
size="24px"
|
||||
style="height: 26px"
|
||||
checked="{{ switch2 }}"
|
||||
bind:change="onSwitch2Change"
|
||||
/>
|
||||
</van-cell>
|
||||
<van-button type="info" block bind:click="onConfirm">
|
||||
确定
|
||||
</van-button>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
switchTitle1: '包邮',
|
||||
switchTitle2: '团购',
|
||||
itemTitle: '筛选',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
],
|
||||
value1: 0,
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.selectComponent('#item').toggle();
|
||||
},
|
||||
|
||||
onSwitch1Change ({ detail }) {
|
||||
this.setData({ switch1: detail });
|
||||
},
|
||||
|
||||
onSwitch2Change ({ detail }) {
|
||||
this.setData({ switch2: detail });
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 自定义选中状态颜色
|
||||
|
||||
```html
|
||||
<van-dropdown-menu active-color="#ee0a24">
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
### 向上展开
|
||||
|
||||
```html
|
||||
<van-dropdown-menu direction="up">
|
||||
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
### 禁用菜单
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
|
||||
<van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### DropdownMenu Props
|
||||
|
||||
| Attribute | Description | Type | Default | Version |
|
||||
| ---------------------- | ------------------------------ | --------- | --------- | ------- |
|
||||
| active-color | 菜单标题和选项的选中态颜色 | *string* | `#1989fa` | - |
|
||||
| z-index | 菜单栏 z-index 层级 | *number* | `10` | - |
|
||||
| duration | 动画时长，单位毫秒 | *number* | `200` | - |
|
||||
| direction | 菜单展开方向，可选值为up | *string* | `down` | - |
|
||||
| overlay | 是否显示遮罩层 | *boolean* | `true` | - |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | *boolean* | `true` | - |
|
||||
| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | *boolean* | `true` | - |
|
||||
|
||||
### DropdownItem Props
|
||||
|
||||
| Attribute | Description | Type | Default | Version |
|
||||
| ----------- | ---------------------- | ------------------ | ----------------------- | ------- |
|
||||
| value | 当前选中项对应的 value | *string \| number* | - | - |
|
||||
| title | 菜单项标题 | *string* | Text of selected option | - |
|
||||
| options | 选项数组 | *Option[]* | `[]` | - |
|
||||
| disabled | 是否禁用菜单 | *boolean* | `false` | - |
|
||||
| title-class | 标题额外类名 | *string* | - | - |
|
||||
|
||||
### DropdownItem Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------ | ----------------------------- | --------- |
|
||||
| change | 点击选项导致 value 变化时触发 | value |
|
||||
| close | 关闭菜单栏时触发 | - |
|
||||
|
||||
### DropdownItem Methods
|
||||
|
||||
通过 selectComponent(id) 可访问
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
| ------ | ------------- | ------------ | ---------------- |
|
||||
| toggle | show: boolean | - | 切换菜单是否展示 |
|
||||
|
||||
### Data Structure of Option
|
||||
|
||||
| Key | Description | Type |
|
||||
| ----- | ------------------------------------------ | ------------------ |
|
||||
| text | 文字 | *string* |
|
||||
| value | 标识符 | *string \| number* |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string* |
|
||||
3
packages/dropdown-menu/index.json
Normal file
3
packages/dropdown-menu/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
63
packages/dropdown-menu/index.less
Normal file
63
packages/dropdown-menu/index.less
Normal file
@ -0,0 +1,63 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-dropdown-menu {
|
||||
display: flex;
|
||||
height: @dropdown-menu-height;
|
||||
background-color: @dropdown-menu-background-color;
|
||||
user-select: none;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0; // hack for flex ellipsis
|
||||
|
||||
&:active {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.van-dropdown-menu__title {
|
||||
color: @dropdown-menu-title-disabled-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
padding: @dropdown-menu-title-padding;
|
||||
color: @dropdown-menu-title-text-color;
|
||||
font-size: @dropdown-menu-title-font-size;
|
||||
line-height: @dropdown-menu-title-line-height;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -4px;
|
||||
margin-top: -5px;
|
||||
border: 3px solid;
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
transform: rotate(-45deg);
|
||||
opacity: .8;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @dropdown-menu-title-active-text-color;
|
||||
}
|
||||
|
||||
&--down {
|
||||
&::after {
|
||||
margin-top: -1px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
184
packages/dropdown-menu/index.ts
Normal file
184
packages/dropdown-menu/index.ts
Normal file
@ -0,0 +1,184 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { Weapp } from 'definitions/weapp';
|
||||
import { addUnit } from '../common/utils';
|
||||
|
||||
interface ToggleOptions {
|
||||
immediate?: Boolean;
|
||||
}
|
||||
|
||||
let ARRAY: WechatMiniprogram.Component.TrivialInstance[] = [];
|
||||
|
||||
VantComponent({
|
||||
field: true,
|
||||
|
||||
relation: {
|
||||
name: 'dropdown-item',
|
||||
type: 'descendant',
|
||||
linked(target) {
|
||||
this.children = this.children || [];
|
||||
// 透传 props 给 dropdown-item
|
||||
const { overlay, duration, activeColor, closeOnClickOverlay, direction } = this.data;
|
||||
this.updateChildData(target, {
|
||||
overlay,
|
||||
duration,
|
||||
activeColor,
|
||||
closeOnClickOverlay,
|
||||
direction,
|
||||
childIndex: this.children.length
|
||||
});
|
||||
|
||||
this.children.push(target);
|
||||
// 收集 dorpdown-item 的 data 挂在 data 上
|
||||
target &&
|
||||
this.setData({
|
||||
itemListData: this.data.itemListData.concat([target.data])
|
||||
});
|
||||
},
|
||||
unlinked(target) {
|
||||
this.children = this.children.filter((child: WechatMiniprogram.Component.TrivialInstance) => child !== target);
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
activeColor: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 10
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 200
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'down'
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
itemListData: []
|
||||
},
|
||||
|
||||
created() {
|
||||
ARRAY.push(this);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
ARRAY = ARRAY.filter(item => item !== this);
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateChildData(childItem: WechatMiniprogram.Component.TrivialInstance, newData, needRefreshList: Boolean = false) {
|
||||
childItem.setData(newData);
|
||||
|
||||
if (needRefreshList) {
|
||||
// dropdown-item data 更新，涉及到 title 的展示，触发模板更新
|
||||
this.setData({ itemListData: this.data.itemListData });
|
||||
}
|
||||
},
|
||||
|
||||
toggleItem(active: Number) {
|
||||
this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: Number) => {
|
||||
const { showPopup } = item.data;
|
||||
if (index === active) {
|
||||
this.toggleChildItem(item);
|
||||
} else if (showPopup) {
|
||||
this.toggleChildItem(item, false, { immediate: true });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
toggleChildItem(childItem: WechatMiniprogram.Component.TrivialInstance, show: boolean, options: ToggleOptions = {}) {
|
||||
const { showPopup, duration } = childItem.data;
|
||||
|
||||
if (show === undefined) show = !showPopup;
|
||||
|
||||
if (show === showPopup) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newChildData = { transition: !options.immediate, showPopup: show };
|
||||
|
||||
if (!show) {
|
||||
const time = options.immediate ? 0 : duration;
|
||||
this.updateChildData(childItem, { ...newChildData }, true);
|
||||
|
||||
setTimeout(() => {
|
||||
this.updateChildData(childItem, { showWrapper: false }, true);
|
||||
}, time);
|
||||
return;
|
||||
}
|
||||
|
||||
this.getChildWrapperStyle().then((wrapperStyle: String = '') => {
|
||||
this.updateChildData(
|
||||
childItem,
|
||||
{
|
||||
...newChildData,
|
||||
wrapperStyle,
|
||||
showWrapper: true
|
||||
},
|
||||
true
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
close() {
|
||||
this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance) => {
|
||||
this.toggleChildItem(item, false, { immediate: true });
|
||||
});
|
||||
},
|
||||
|
||||
getChildWrapperStyle() {
|
||||
const { windowHeight } = wx.getSystemInfoSync();
|
||||
const { zIndex, direction } = this.data;
|
||||
let offset = 0;
|
||||
|
||||
return this.getRect('.van-dropdown-menu').then(rect => {
|
||||
const { top = 0, bottom = 0 } = rect;
|
||||
if (direction === 'down') {
|
||||
offset = bottom;
|
||||
} else {
|
||||
offset = windowHeight - top;
|
||||
}
|
||||
|
||||
let wrapperStyle = `z-index: ${zIndex};`;
|
||||
|
||||
if (direction === 'down') {
|
||||
wrapperStyle += `top: ${addUnit(offset)};`;
|
||||
} else {
|
||||
wrapperStyle += `bottom: ${addUnit(offset)};`;
|
||||
}
|
||||
|
||||
return Promise.resolve(wrapperStyle);
|
||||
});
|
||||
},
|
||||
|
||||
onTitleTap(event: Weapp.Event) {
|
||||
// item ---> dropdown-item
|
||||
const { item, index } = event.currentTarget.dataset;
|
||||
|
||||
if (!item.disabled) {
|
||||
// menuItem ---> dropdown-menu
|
||||
ARRAY.forEach(menuItem => {
|
||||
if (menuItem && menuItem.data.closeOnClickOutside && menuItem !== this) {
|
||||
menuItem.close();
|
||||
}
|
||||
});
|
||||
|
||||
this.toggleItem(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
23
packages/dropdown-menu/index.wxml
Normal file
23
packages/dropdown-menu/index.wxml
Normal file
@ -0,0 +1,23 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-dropdown-menu van-dropdown-menu--top-bottom">
|
||||
<view
|
||||
wx:for="{{ itemListData }}"
|
||||
wx:key="index"
|
||||
data-item="{{ item }}"
|
||||
data-index="{{ index }}"
|
||||
class="{{ utils.bem('dropdown-menu__item', { disabled: item.disabled }) }}"
|
||||
bind:tap="onTitleTap"
|
||||
>
|
||||
<view
|
||||
class="{{ item.titleClass }} {{ utils.bem('dropdown-menu__title', { active: item.showPopup, down: item.showPopup === (direction === 'down') }) }}"
|
||||
style="{{ item.showPopup ? 'color:' + activeColor : '' }}"
|
||||
>
|
||||
<view class="van-ellipsis">
|
||||
{{item.displayTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot />
|
||||
</view>
|
||||
Loading…
x
Reference in New Issue
Block a user