Merge branch '2.x' into dev

This commit is contained in:
chenjiahan 2020-11-21 18:49:01 +08:00
commit 40840abeeb
7 changed files with 39 additions and 19 deletions

View File

@ -164,6 +164,7 @@ export default {
| actions | Actions | _Action[]_ | `[]` | | actions | Actions | _Action[]_ | `[]` |
| placement | Placement | _string_ | `bottom` | | placement | Placement | _string_ | `bottom` |
| theme | Themecan be set to `dark` | _string_ | `light` | | theme | Themecan be set to `dark` | _string_ | `light` |
| offset | Distance to reference | _[number, number]_ | `[0, 8]` |
| overlay | Whether to show overlay | _boolean_ | `false` | | overlay | Whether to show overlay | _boolean_ | `false` |
| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` | | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
| close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` | | close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |

View File

@ -206,6 +206,7 @@ export default {
| actions | 选项列表 | _Action[]_ | `[]` | | actions | 选项列表 | _Action[]_ | `[]` |
| placement | 弹出位置 | _string_ | `bottom` | | placement | 弹出位置 | _string_ | `bottom` |
| theme | 主题风格,可选值为 `dark` | _string_ | `light` | | theme | 主题风格,可选值为 `dark` | _string_ | `light` |
| offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
| overlay | 是否显示遮罩层 | _boolean_ | `false` | | overlay | 是否显示遮罩层 | _boolean_ | `false` |
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` | | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
| close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` | | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |

View File

@ -29,8 +29,6 @@ export default createComponent({
props: { props: {
show: Boolean, show: Boolean,
overlay: Boolean, overlay: Boolean,
textColor: String,
backgroundColor: String,
offset: { offset: {
type: Array, type: Array,
default: () => [0, 8], default: () => [0, 8],

View File

@ -133,11 +133,12 @@ export default {
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
| ------------- | ------------------------------- | -------------- | | --- | --- | --- |
| click | Emitted when Popup is clicked | _event: Event_ | | click | Emitted when Popup is clicked | _event: Event_ |
| open | Emitted when opening Popup | - | | click-overlay | Emitted when overlay is clicked | - |
| close | Emitted when closing Popup | - | | click-close-icon `v2.11.0` | Emitted when close icon is clicked | _event: Event_ |
| opened | Emitted when Popup is opened | - | | open | Emitted when opening Popup | - |
| closed | Emitted when Popup is closed | - | | close | Emitted when closing Popup | - |
| click-overlay | Emitted when overlay is clicked | - | | opened | Emitted when Popup is opened | - |
| closed | Emitted when Popup is closed | - |

View File

@ -143,11 +143,12 @@ export default {
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| ------------- | -------------------------- | -------------- | | -------------------------- | -------------------------- | -------------- |
| click | 点击弹出层时触发 | _event: Event_ | | click | 点击弹出层时触发 | _event: Event_ |
| open | 打开弹出层时触发 | - | | click-overlay | 点击遮罩层时触发 | - |
| close | 关闭弹出层时触发 | - | | click-close-icon `v2.11.0` | 点击关闭图标时触发 | _event: Event_ |
| opened | 打开弹出层且动画结束后触发 | - | | open | 打开弹出层时触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - | | close | 关闭弹出层时触发 | - |
| click-overlay | 点击遮罩层时触发 | - | | opened | 打开弹出层且动画结束后触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - |

View File

@ -102,6 +102,7 @@ export default createComponent({
'closed', 'closed',
'update:show', 'update:show',
'click-overlay', 'click-overlay',
'click-close-icon',
], ],
setup(props, { emit, attrs, slots }) { setup(props, { emit, attrs, slots }) {
@ -173,6 +174,11 @@ export default createComponent({
} }
}; };
const onClickCloseIcon = (event) => {
emit('click-close-icon', event);
close();
};
const renderCloseIcon = () => { const renderCloseIcon = () => {
if (props.closeable) { if (props.closeable) {
return ( return (
@ -181,7 +187,7 @@ export default createComponent({
tabindex="0" tabindex="0"
name={props.closeIcon} name={props.closeIcon}
class={bem('close-icon', props.closeIconPosition)} class={bem('close-icon', props.closeIconPosition)}
onClick={close} onClick={onClickCloseIcon}
/> />
); );
} }

View File

@ -252,6 +252,18 @@ test('closeable prop', () => {
expect(wrapper.emitted('input')[0][0]).toEqual(false); expect(wrapper.emitted('input')[0][0]).toEqual(false);
}); });
test('should emit click-close-icon event when close icon is clicked', () => {
const wrapper = mount(Popup, {
propsData: {
value: true,
closeable: true,
},
});
wrapper.find('.van-popup__close-icon').trigger('click');
expect(wrapper.emitted('click-close-icon').length).toEqual(1);
});
test('close-icon prop', () => { test('close-icon prop', () => {
const wrapper = mount(Popup, { const wrapper = mount(Popup, {
props: { props: {