From dd5d76dbb4611f036df654c9a4e95043e1638386 Mon Sep 17 00:00:00 2001 From: aphasic Date: Wed, 23 Oct 2019 12:00:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20add=20DropdownMenu=E3=80=81DropdownItem?= =?UTF-8?q?=20component=20(#2181)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/action-sheet/index.wxss | 2 +- dist/button/index.wxss | 2 +- dist/card/index.wxss | 2 +- dist/dialog/index.wxss | 2 +- dist/dropdown-item/index.d.ts | 1 + dist/dropdown-item/index.js | 70 ++++++++++ dist/dropdown-item/index.json | 8 ++ dist/dropdown-item/index.wxml | 44 ++++++ dist/dropdown-item/index.wxss | 1 + dist/dropdown-menu/index.d.ts | 1 + dist/dropdown-menu/index.js | 148 ++++++++++++++++++++ dist/dropdown-menu/index.json | 3 + dist/dropdown-menu/index.wxml | 23 ++++ dist/dropdown-menu/index.wxss | 1 + dist/image/index.d.ts | 1 + dist/image/index.js | 91 ++++++++++++ dist/image/index.json | 7 + dist/image/index.wxml | 47 +++++++ dist/image/index.wxss | 1 + dist/progress/index.js | 5 +- dist/progress/index.wxml | 5 +- dist/stepper/index.wxml | 67 ++++----- dist/steps/index.wxml | 20 ++- dist/steps/index.wxss | 2 +- dist/switch/index.wxss | 2 +- example/app.json | 7 +- example/config.js | 4 + example/pages/dropdown-menu/index.js | 35 +++++ example/pages/dropdown-menu/index.json | 3 + example/pages/dropdown-menu/index.wxml | 57 ++++++++ example/pages/dropdown-menu/index.wxss | 3 + lib/action-sheet/index.wxss | 2 +- lib/button/index.wxss | 2 +- lib/card/index.wxss | 2 +- lib/dialog/index.wxss | 2 +- lib/dropdown-item/index.js | 73 ++++++++++ lib/dropdown-item/index.json | 8 ++ lib/dropdown-item/index.wxml | 44 ++++++ lib/dropdown-item/index.wxss | 1 + lib/dropdown-menu/index.js | 169 +++++++++++++++++++++++ lib/dropdown-menu/index.json | 3 + lib/dropdown-menu/index.wxml | 23 ++++ lib/dropdown-menu/index.wxss | 1 + lib/image/index.js | 93 +++++++++++++ lib/image/index.json | 7 + lib/image/index.wxml | 47 +++++++ lib/image/index.wxss | 1 + lib/progress/index.js | 1 + lib/progress/index.wxml | 5 +- lib/stepper/index.wxml | 67 ++++----- lib/steps/index.wxml | 20 ++- lib/steps/index.wxss | 2 +- lib/switch/index.wxss | 2 +- packages/common/style/var.less | 11 ++ packages/dropdown-item/index.json | 8 ++ packages/dropdown-item/index.less | 32 +++++ packages/dropdown-item/index.ts | 85 ++++++++++++ packages/dropdown-item/index.wxml | 44 ++++++ packages/dropdown-menu/README.md | 179 ++++++++++++++++++++++++ packages/dropdown-menu/index.json | 3 + packages/dropdown-menu/index.less | 63 +++++++++ packages/dropdown-menu/index.ts | 184 +++++++++++++++++++++++++ packages/dropdown-menu/index.wxml | 23 ++++ 63 files changed, 1778 insertions(+), 94 deletions(-) create mode 100644 dist/dropdown-item/index.d.ts create mode 100644 dist/dropdown-item/index.js create mode 100644 dist/dropdown-item/index.json create mode 100644 dist/dropdown-item/index.wxml create mode 100644 dist/dropdown-item/index.wxss create mode 100644 dist/dropdown-menu/index.d.ts create mode 100644 dist/dropdown-menu/index.js create mode 100644 dist/dropdown-menu/index.json create mode 100644 dist/dropdown-menu/index.wxml create mode 100644 dist/dropdown-menu/index.wxss create mode 100644 dist/image/index.d.ts create mode 100644 dist/image/index.js create mode 100644 dist/image/index.json create mode 100644 dist/image/index.wxml create mode 100644 dist/image/index.wxss create mode 100644 example/pages/dropdown-menu/index.js create mode 100644 example/pages/dropdown-menu/index.json create mode 100644 example/pages/dropdown-menu/index.wxml create mode 100644 example/pages/dropdown-menu/index.wxss create mode 100644 lib/dropdown-item/index.js create mode 100644 lib/dropdown-item/index.json create mode 100644 lib/dropdown-item/index.wxml create mode 100644 lib/dropdown-item/index.wxss create mode 100644 lib/dropdown-menu/index.js create mode 100644 lib/dropdown-menu/index.json create mode 100644 lib/dropdown-menu/index.wxml create mode 100644 lib/dropdown-menu/index.wxss create mode 100644 lib/image/index.js create mode 100644 lib/image/index.json create mode 100644 lib/image/index.wxml create mode 100644 lib/image/index.wxss create mode 100644 packages/dropdown-item/index.json create mode 100644 packages/dropdown-item/index.less create mode 100644 packages/dropdown-item/index.ts create mode 100644 packages/dropdown-item/index.wxml create mode 100644 packages/dropdown-menu/README.md create mode 100644 packages/dropdown-menu/index.json create mode 100644 packages/dropdown-menu/index.less create mode 100644 packages/dropdown-menu/index.ts create mode 100644 packages/dropdown-menu/index.wxml diff --git a/dist/action-sheet/index.wxss b/dist/action-sheet/index.wxss index c40c051d..7982ab26 100644 --- a/dist/action-sheet/index.wxss +++ b/dist/action-sheet/index.wxss @@ -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)} \ No newline at end of file +@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)} \ No newline at end of file diff --git a/dist/button/index.wxss b/dist/button/index.wxss index e0f3f5d0..38e41b99 100644 --- a/dist/button/index.wxss +++ b/dist/button/index.wxss @@ -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} \ No newline at end of file +@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} \ No newline at end of file diff --git a/dist/card/index.wxss b/dist/card/index.wxss index 0d728a3f..511c031f 100644 --- a/dist/card/index.wxss +++ b/dist/card/index.wxss @@ -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} \ No newline at end of file +@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} \ No newline at end of file diff --git a/dist/dialog/index.wxss b/dist/dialog/index.wxss index 869c5c35..4cd4fa32 100644 --- a/dist/dialog/index.wxss +++ b/dist/dialog/index.wxss @@ -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} \ No newline at end of file +@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} \ No newline at end of file diff --git a/dist/dropdown-item/index.d.ts b/dist/dropdown-item/index.d.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/dist/dropdown-item/index.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/dist/dropdown-item/index.js b/dist/dropdown-item/index.js new file mode 100644 index 00000000..529de0f5 --- /dev/null +++ b/dist/dropdown-item/index.js @@ -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); + } + } +}); diff --git a/dist/dropdown-item/index.json b/dist/dropdown-item/index.json new file mode 100644 index 00000000..88d54099 --- /dev/null +++ b/dist/dropdown-item/index.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "van-popup": "../popup/index", + "van-cell": "../cell/index", + "van-icon": "../icon/index" + } +} diff --git a/dist/dropdown-item/index.wxml b/dist/dropdown-item/index.wxml new file mode 100644 index 00000000..07bca8d5 --- /dev/null +++ b/dist/dropdown-item/index.wxml @@ -0,0 +1,44 @@ + + + + + + + {{ item.text }} + + + + + + + diff --git a/dist/dropdown-item/index.wxss b/dist/dropdown-item/index.wxss new file mode 100644 index 00000000..3eb29f0e --- /dev/null +++ b/dist/dropdown-item/index.wxss @@ -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} \ No newline at end of file diff --git a/dist/dropdown-menu/index.d.ts b/dist/dropdown-menu/index.d.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/dist/dropdown-menu/index.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/dist/dropdown-menu/index.js b/dist/dropdown-menu/index.js new file mode 100644 index 00000000..302659a1 --- /dev/null +++ b/dist/dropdown-menu/index.js @@ -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); + } + } + } +}); diff --git a/dist/dropdown-menu/index.json b/dist/dropdown-menu/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/dist/dropdown-menu/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/dist/dropdown-menu/index.wxml b/dist/dropdown-menu/index.wxml new file mode 100644 index 00000000..22933b57 --- /dev/null +++ b/dist/dropdown-menu/index.wxml @@ -0,0 +1,23 @@ + + + + + + + {{item.displayTitle}} + + + + + + diff --git a/dist/dropdown-menu/index.wxss b/dist/dropdown-menu/index.wxss new file mode 100644 index 00000000..12e3d114 --- /dev/null +++ b/dist/dropdown-menu/index.wxss @@ -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)} \ No newline at end of file diff --git a/dist/image/index.d.ts b/dist/image/index.d.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/dist/image/index.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/dist/image/index.js b/dist/image/index.js new file mode 100644 index 00000000..8864c2b5 --- /dev/null +++ b/dist/image/index.js @@ -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); + }, + } +}); diff --git a/dist/image/index.json b/dist/image/index.json new file mode 100644 index 00000000..e00a5887 --- /dev/null +++ b/dist/image/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-icon": "../icon/index", + "van-loading": "../loading/index" + } +} diff --git a/dist/image/index.wxml b/dist/image/index.wxml new file mode 100644 index 00000000..1a43652f --- /dev/null +++ b/dist/image/index.wxml @@ -0,0 +1,47 @@ + + + + + +
+ + +
+
+ + +
+ diff --git a/dist/image/index.wxss b/dist/image/index.wxss new file mode 100644 index 00000000..ade9f694 --- /dev/null +++ b/dist/image/index.wxss @@ -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} \ No newline at end of file diff --git a/dist/progress/index.js b/dist/progress/index.js index c37b54b9..6ca67bd5 100644 --- a/dist/progress/index.js +++ b/dist/progress/index.js @@ -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' diff --git a/dist/progress/index.wxml b/dist/progress/index.wxml index 01a70e75..5d27517d 100644 --- a/dist/progress/index.wxml +++ b/dist/progress/index.wxml @@ -1,6 +1,9 @@ - + - - - + + + + diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml index 9803de50..9e280d87 100644 --- a/dist/steps/index.wxml +++ b/dist/steps/index.wxml @@ -13,13 +13,25 @@ - - + + - + - + diff --git a/dist/steps/index.wxss b/dist/steps/index.wxss index 283d43c1..11e11c8d 100644 --- a/dist/steps/index.wxss +++ b/dist/steps/index.wxss @@ -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)} \ No newline at end of file +@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)} \ No newline at end of file diff --git a/dist/switch/index.wxss b/dist/switch/index.wxss index 09007116..335fb1b6 100644 --- a/dist/switch/index.wxss +++ b/dist/switch/index.wxss @@ -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)} \ No newline at end of file +@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)} \ No newline at end of file diff --git a/example/app.json b/example/app.json index 4abb3230..d2af4ef2 100644 --- a/example/app.json +++ b/example/app.json @@ -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" } diff --git a/example/config.js b/example/config.js index a01b2d26..e6efe99d 100644 --- a/example/config.js +++ b/example/config.js @@ -91,6 +91,10 @@ export default [ path: '/dialog', title: 'Dialog 弹出框' }, + { + path: '/dropdown-menu', + title: 'DropdownMenu 下拉菜单' + }, { path: '/loading', title: 'Loading 加载' diff --git a/example/pages/dropdown-menu/index.js b/example/pages/dropdown-menu/index.js new file mode 100644 index 00000000..0e0a1399 --- /dev/null +++ b/example/pages/dropdown-menu/index.js @@ -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 }); + } +}); diff --git a/example/pages/dropdown-menu/index.json b/example/pages/dropdown-menu/index.json new file mode 100644 index 00000000..940c5450 --- /dev/null +++ b/example/pages/dropdown-menu/index.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "Dropdown Menu" +} diff --git a/example/pages/dropdown-menu/index.wxml b/example/pages/dropdown-menu/index.wxml new file mode 100644 index 00000000..66f0afbd --- /dev/null +++ b/example/pages/dropdown-menu/index.wxml @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + 确定 + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/example/pages/dropdown-menu/index.wxss b/example/pages/dropdown-menu/index.wxss new file mode 100644 index 00000000..3fe2ddad --- /dev/null +++ b/example/pages/dropdown-menu/index.wxss @@ -0,0 +1,3 @@ +page { + background-color: white; +} \ No newline at end of file diff --git a/lib/action-sheet/index.wxss b/lib/action-sheet/index.wxss index c40c051d..7982ab26 100644 --- a/lib/action-sheet/index.wxss +++ b/lib/action-sheet/index.wxss @@ -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)} \ No newline at end of file +@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)} \ No newline at end of file diff --git a/lib/button/index.wxss b/lib/button/index.wxss index e0f3f5d0..38e41b99 100644 --- a/lib/button/index.wxss +++ b/lib/button/index.wxss @@ -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} \ No newline at end of file +@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} \ No newline at end of file diff --git a/lib/card/index.wxss b/lib/card/index.wxss index 0d728a3f..511c031f 100644 --- a/lib/card/index.wxss +++ b/lib/card/index.wxss @@ -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} \ No newline at end of file +@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} \ No newline at end of file diff --git a/lib/dialog/index.wxss b/lib/dialog/index.wxss index 869c5c35..4cd4fa32 100644 --- a/lib/dialog/index.wxss +++ b/lib/dialog/index.wxss @@ -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} \ No newline at end of file +@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} \ No newline at end of file diff --git a/lib/dropdown-item/index.js b/lib/dropdown-item/index.js new file mode 100644 index 00000000..06efeb68 --- /dev/null +++ b/lib/dropdown-item/index.js @@ -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); + } + } +}); diff --git a/lib/dropdown-item/index.json b/lib/dropdown-item/index.json new file mode 100644 index 00000000..88d54099 --- /dev/null +++ b/lib/dropdown-item/index.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "van-popup": "../popup/index", + "van-cell": "../cell/index", + "van-icon": "../icon/index" + } +} diff --git a/lib/dropdown-item/index.wxml b/lib/dropdown-item/index.wxml new file mode 100644 index 00000000..07bca8d5 --- /dev/null +++ b/lib/dropdown-item/index.wxml @@ -0,0 +1,44 @@ + + + + + + + {{ item.text }} + + + + + + + diff --git a/lib/dropdown-item/index.wxss b/lib/dropdown-item/index.wxss new file mode 100644 index 00000000..3eb29f0e --- /dev/null +++ b/lib/dropdown-item/index.wxss @@ -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} \ No newline at end of file diff --git a/lib/dropdown-menu/index.js b/lib/dropdown-menu/index.js new file mode 100644 index 00000000..430885f2 --- /dev/null +++ b/lib/dropdown-menu/index.js @@ -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); + } + } + } +}); diff --git a/lib/dropdown-menu/index.json b/lib/dropdown-menu/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/lib/dropdown-menu/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/lib/dropdown-menu/index.wxml b/lib/dropdown-menu/index.wxml new file mode 100644 index 00000000..22933b57 --- /dev/null +++ b/lib/dropdown-menu/index.wxml @@ -0,0 +1,23 @@ + + + + + + + {{item.displayTitle}} + + + + + + diff --git a/lib/dropdown-menu/index.wxss b/lib/dropdown-menu/index.wxss new file mode 100644 index 00000000..12e3d114 --- /dev/null +++ b/lib/dropdown-menu/index.wxss @@ -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)} \ No newline at end of file diff --git a/lib/image/index.js b/lib/image/index.js new file mode 100644 index 00000000..b05a306d --- /dev/null +++ b/lib/image/index.js @@ -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); + }, + } +}); diff --git a/lib/image/index.json b/lib/image/index.json new file mode 100644 index 00000000..e00a5887 --- /dev/null +++ b/lib/image/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-icon": "../icon/index", + "van-loading": "../loading/index" + } +} diff --git a/lib/image/index.wxml b/lib/image/index.wxml new file mode 100644 index 00000000..1a43652f --- /dev/null +++ b/lib/image/index.wxml @@ -0,0 +1,47 @@ + + + + + +
+ + +
+
+ + +
+ diff --git a/lib/image/index.wxss b/lib/image/index.wxss new file mode 100644 index 00000000..ade9f694 --- /dev/null +++ b/lib/image/index.wxss @@ -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} \ No newline at end of file diff --git a/lib/progress/index.js b/lib/progress/index.js index 59ff2a9f..de74f92a 100644 --- a/lib/progress/index.js +++ b/lib/progress/index.js @@ -9,6 +9,7 @@ component_1.VantComponent({ percentage: Number, pivotText: String, pivotColor: String, + trackColor: String, showPivot: { type: Boolean, value: true diff --git a/lib/progress/index.wxml b/lib/progress/index.wxml index ee847edf..5d27517d 100644 --- a/lib/progress/index.wxml +++ b/lib/progress/index.wxml @@ -1,6 +1,9 @@ - + - - - + + + + diff --git a/lib/steps/index.wxml b/lib/steps/index.wxml index 9803de50..9e280d87 100644 --- a/lib/steps/index.wxml +++ b/lib/steps/index.wxml @@ -13,13 +13,25 @@ - - + + - + - + diff --git a/lib/steps/index.wxss b/lib/steps/index.wxss index 283d43c1..11e11c8d 100644 --- a/lib/steps/index.wxss +++ b/lib/steps/index.wxss @@ -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)} \ No newline at end of file +@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)} \ No newline at end of file diff --git a/lib/switch/index.wxss b/lib/switch/index.wxss index 09007116..335fb1b6 100644 --- a/lib/switch/index.wxss +++ b/lib/switch/index.wxss @@ -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)} \ No newline at end of file +@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)} \ No newline at end of file diff --git a/packages/common/style/var.less b/packages/common/style/var.less index 54bb985a..edaf39f1 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -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; diff --git a/packages/dropdown-item/index.json b/packages/dropdown-item/index.json new file mode 100644 index 00000000..88d54099 --- /dev/null +++ b/packages/dropdown-item/index.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "van-popup": "../popup/index", + "van-cell": "../cell/index", + "van-icon": "../icon/index" + } +} diff --git a/packages/dropdown-item/index.less b/packages/dropdown-item/index.less new file mode 100644 index 00000000..8c5007e2 --- /dev/null +++ b/packages/dropdown-item/index.less @@ -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; + } +} diff --git a/packages/dropdown-item/index.ts b/packages/dropdown-item/index.ts new file mode 100644 index 00000000..ea7be13e --- /dev/null +++ b/packages/dropdown-item/index.ts @@ -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); + } + } +}); diff --git a/packages/dropdown-item/index.wxml b/packages/dropdown-item/index.wxml new file mode 100644 index 00000000..07bca8d5 --- /dev/null +++ b/packages/dropdown-item/index.wxml @@ -0,0 +1,44 @@ + + + + + + + {{ item.text }} + + + + + + + diff --git a/packages/dropdown-menu/README.md b/packages/dropdown-menu/README.md new file mode 100644 index 00000000..ad7dfd54 --- /dev/null +++ b/packages/dropdown-menu/README.md @@ -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 + + + + +``` + +```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 + + + + + + + + + + + 确定 + + + +``` + +```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 + + + + +``` + +### 向上展开 + +```html + + + + +``` + +### 禁用菜单 + +```html + + + + +``` + +## 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* | \ No newline at end of file diff --git a/packages/dropdown-menu/index.json b/packages/dropdown-menu/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/packages/dropdown-menu/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/packages/dropdown-menu/index.less b/packages/dropdown-menu/index.less new file mode 100644 index 00000000..6d7c62e8 --- /dev/null +++ b/packages/dropdown-menu/index.less @@ -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); + } + } + } +} diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts new file mode 100644 index 00000000..6e8cda6d --- /dev/null +++ b/packages/dropdown-menu/index.ts @@ -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); + } + } + } +}); diff --git a/packages/dropdown-menu/index.wxml b/packages/dropdown-menu/index.wxml new file mode 100644 index 00000000..22933b57 --- /dev/null +++ b/packages/dropdown-menu/index.wxml @@ -0,0 +1,23 @@ + + + + + + + {{item.displayTitle}} + + + + + +