mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
feat(DropdownItem): add new event open close opend closed & new prop popup-style (#2804)
fix #2361, fix #2796
This commit is contained in:
rex
GitHub
parent
6ffbec1f77
commit
9f8fe59650
@ -334,6 +334,14 @@
|
||||
"id": -1,
|
||||
"name": "uploader",
|
||||
"pathName": "pages/uploader/index",
|
||||
"query": "",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"id": -1,
|
||||
"name": "dropdown-menu",
|
||||
"pathName": "pages/dropdown-menu/index",
|
||||
"query": "",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
|
||||
@ -10,7 +10,7 @@ VantComponent({
|
||||
current: 'dropdown-item',
|
||||
linked() {
|
||||
this.updateDataFromParent();
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
@ -31,7 +31,8 @@ VantComponent({
|
||||
type: Array,
|
||||
value: [],
|
||||
observer: 'rerender'
|
||||
}
|
||||
},
|
||||
popupStyle: String
|
||||
},
|
||||
|
||||
data: {
|
||||
@ -67,11 +68,23 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
onClickOverlay() {
|
||||
this.toggle();
|
||||
onOpen() {
|
||||
this.$emit('open');
|
||||
},
|
||||
|
||||
onOpened() {
|
||||
this.$emit('opened');
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
onClosed() {
|
||||
this.$emit('closed');
|
||||
this.setData({ showWrapper: false });
|
||||
},
|
||||
|
||||
onOptionTap(event: Weapp.Event) {
|
||||
const { option } = event.currentTarget.dataset;
|
||||
const { value } = option;
|
||||
@ -80,10 +93,6 @@ VantComponent({
|
||||
this.setData({ showPopup: false, value });
|
||||
this.$emit('close');
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({ showWrapper: false });
|
||||
}, this.data.duration || 0);
|
||||
|
||||
this.rerender();
|
||||
|
||||
if (shouldEmitChange) {
|
||||
@ -92,9 +101,9 @@ VantComponent({
|
||||
},
|
||||
|
||||
toggle(show, options = {}) {
|
||||
const { showPopup, duration } = this.data;
|
||||
const { showPopup } = this.data;
|
||||
|
||||
if (show == null) {
|
||||
if (typeof show !== 'boolean') {
|
||||
show = !showPopup;
|
||||
}
|
||||
|
||||
@ -102,27 +111,19 @@ VantComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
if (!show) {
|
||||
const time = options.immediate ? 0 : duration;
|
||||
this.setData({ transition: !options.immediate, showPopup: show });
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({ showWrapper: false });
|
||||
}, time);
|
||||
|
||||
this.rerender();
|
||||
return;
|
||||
}
|
||||
|
||||
this.parent.getChildWrapperStyle().then((wrapperStyle: String = '') => {
|
||||
this.setData({
|
||||
transition: !options.immediate,
|
||||
showPopup: show,
|
||||
wrapperStyle,
|
||||
showWrapper: true
|
||||
});
|
||||
this.rerender();
|
||||
this.setData({
|
||||
transition: !options.immediate,
|
||||
showPopup: show,
|
||||
});
|
||||
|
||||
if (show) {
|
||||
this.parent.getChildWrapperStyle().then((wrapperStyle: string) => {
|
||||
this.setData({ wrapperStyle, showWrapper: true });
|
||||
this.rerender();
|
||||
});
|
||||
} else {
|
||||
this.rerender();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -7,13 +7,17 @@
|
||||
>
|
||||
<van-popup
|
||||
show="{{ showPopup }}"
|
||||
custom-style="position: absolute;"
|
||||
custom-style="position: absolute;{{ popupStyle }}"
|
||||
overlay-style="position: absolute;"
|
||||
overlay="{{ overlay }}"
|
||||
position="{{ direction === 'down' ? 'top' : 'bottom' }}"
|
||||
duration="{{ transition ? duration : 0 }}"
|
||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||
bind:close="onClickOverlay"
|
||||
bind:enter="onOpen"
|
||||
bind:leave="onClose"
|
||||
bind:close="toggle"
|
||||
bind:after-enter="onOpened"
|
||||
bind:after-leave="onClosed"
|
||||
>
|
||||
<van-cell
|
||||
wx:for="{{ options }}"
|
||||
|
||||
@ -83,18 +83,18 @@ Page({
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
],
|
||||
value1: 0,
|
||||
value1: 0
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
onConfirm() {
|
||||
this.selectComponent('#item').toggle();
|
||||
},
|
||||
|
||||
onSwitch1Change ({ detail }) {
|
||||
onSwitch1Change({ detail }) {
|
||||
this.setData({ switch1: detail });
|
||||
},
|
||||
|
||||
onSwitch2Change ({ detail }) {
|
||||
onSwitch2Change({ detail }) {
|
||||
this.setData({ switch2: detail });
|
||||
}
|
||||
});
|
||||
@ -131,45 +131,49 @@ Page({
|
||||
|
||||
### 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` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------ | --------- | --------- |
|
||||
| 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* | - | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ---------------------- | ------------------ | -------------- |
|
||||
| value | 当前选中项对应的 value | _number \| string_ | - |
|
||||
| title | 菜单项标题 | _string_ | 当前选中项文字 |
|
||||
| options | 选项数组 | _Option[]_ | `[]` |
|
||||
| disabled | 是否禁用菜单 | _boolean_ | `false` |
|
||||
| title-class | 标题额外类名 | _string_ | - |
|
||||
| popup-style | 自定义弹出层样式 | _string_ | - |
|
||||
|
||||
### DropdownItem Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------ | ----------------------------- | --------- |
|
||||
| change | 点击选项导致 value 变化时触发 | value |
|
||||
| close | 关闭菜单栏时触发 | - |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ----------------------------- | -------- |
|
||||
| change | 点击选项导致 value 变化时触发 | value |
|
||||
| open | 打开菜单栏时触发 | - |
|
||||
| close | 关闭菜单栏时触发 | - |
|
||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||
| closed | 关闭菜单栏且动画结束后触发 | - |
|
||||
|
||||
### DropdownItem Methods
|
||||
### DropdownItem 方法
|
||||
|
||||
通过 selectComponent(id) 可访问
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
| ------ | ------------- | ------------ | ---------------- |
|
||||
| toggle | show: boolean | - | 切换菜单是否展示 |
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ------------------------------------------------------------- | -------------- | ------ |
|
||||
| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
|
||||
|
||||
### Data Structure of Option
|
||||
### Option 数据结构
|
||||
|
||||
| Key | Description | Type |
|
||||
| ----- | ------------------------------------------ | ------------------ |
|
||||
| text | 文字 | *string* |
|
||||
| value | 标识符 | *string \| number* |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string* |
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ----- | -------------------------------- | ------------------ |
|
||||
| text | 文字 | _string_ |
|
||||
| value | 标识符 | _number \| string_ |
|
||||
| icon | 左侧[图标名称](#/icon)或图片链接 | _string_ |
|
||||
|
||||
@ -37,14 +37,11 @@ export const transition = function(showDefaultValue: boolean) {
|
||||
display: false
|
||||
},
|
||||
|
||||
attached() {
|
||||
if (this.data.show) {
|
||||
this.enter();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
observeShow(value: boolean) {
|
||||
observeShow(value: boolean, old: boolean) {
|
||||
if (value === old) {
|
||||
return;
|
||||
}
|
||||
value ? this.enter() : this.leave();
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user