mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore(Popover): refactor with composition api
This commit is contained in:
chenjiahan
parent
27706b023b
commit
e0ad5107d7
@ -59,6 +59,7 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
|
||||
- Dialog
|
||||
- ImagePreview
|
||||
- Notify
|
||||
- Popover
|
||||
- Popup
|
||||
- ShareSheet
|
||||
|
||||
|
||||
@ -3,10 +3,11 @@
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { createApp } from 'vue';
|
||||
import { Popover } from 'vant';
|
||||
|
||||
Vue.use(Popover);
|
||||
const app = createApp();
|
||||
app.use(Popover);
|
||||
```
|
||||
|
||||
## Usage
|
||||
@ -14,7 +15,7 @@ Vue.use(Popover);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
|
||||
<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
Light Theme
|
||||
@ -50,7 +51,7 @@ export default {
|
||||
Using the `theme` prop to change the style of Popover.
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" theme="dark" :actions="actions">
|
||||
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
Dark Theme
|
||||
@ -100,7 +101,7 @@ bottom-end # Bottom right
|
||||
### Show Icon
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model:show="showPopover" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
Show Icon
|
||||
@ -129,7 +130,7 @@ export default {
|
||||
Using the `disabled` option to disable an action.
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model:show="showPopover" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
Disable Action
|
||||
@ -159,14 +160,14 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | Whether to show Popover | _boolean_ | `false` |
|
||||
| v-model:show | Whether to show Popover | _boolean_ | `false` |
|
||||
| actions | Actions | _Action[]_ | `[]` |
|
||||
| placement | Placement | _string_ | `bottom` |
|
||||
| theme | Theme，can be set to `dark` | _string_ | `light` |
|
||||
| overlay | Whether to show overlay | _boolean_ | `false` |
|
||||
| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
|
||||
| close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
|
||||
| get-container | Return the mount node for Popover | _string \| () => Element_ | `body` |
|
||||
| teleport | Return the mount node for Popover | _string \| Element_ | `body` |
|
||||
|
||||
### Data Structure of Action
|
||||
|
||||
|
||||
@ -7,10 +7,11 @@
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { createApp } from 'vue';
|
||||
import { Popover } from 'vant';
|
||||
|
||||
Vue.use(Popover);
|
||||
const app = createApp();
|
||||
app.use(Popover);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
@ -20,7 +21,7 @@ Vue.use(Popover);
|
||||
当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
|
||||
<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
浅色风格
|
||||
@ -53,7 +54,7 @@ export default {
|
||||
Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" theme="dark" :actions="actions">
|
||||
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
深色风格
|
||||
@ -103,7 +104,7 @@ bottom-end # 底部右侧位置
|
||||
在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model:show="showPopover" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
展示图标
|
||||
@ -132,7 +133,7 @@ export default {
|
||||
在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model:show="showPopover" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
禁用选项
|
||||
@ -161,7 +162,7 @@ export default {
|
||||
通过默认插槽，可以在 Popover 内部放置任意内容。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover">
|
||||
<van-popover v-model:show="showPopover">
|
||||
<van-grid
|
||||
square
|
||||
clickable
|
||||
@ -201,14 +202,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
|
||||
| v-model:show | 是否展示气泡弹出层 | _boolean_ | `false` |
|
||||
| actions | 选项列表 | _Action[]_ | `[]` |
|
||||
| placement | 弹出位置 | _string_ | `bottom` |
|
||||
| theme | 主题风格，可选值为 `dark` | _string_ | `light` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `false` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
|
||||
| close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
|
||||
| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
|
||||
|
||||
### Action 数据结构
|
||||
|
||||
|
||||
@ -1,125 +1,123 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-popover
|
||||
v-model="show.lightTheme"
|
||||
:actions="t('actions')"
|
||||
placement="bottom-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.lightTheme = true">
|
||||
{{ t('lightTheme') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
<van-popover
|
||||
v-model="show.darkTheme"
|
||||
theme="dark"
|
||||
:actions="t('actions')"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.darkTheme = true">
|
||||
{{ t('darkTheme') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-popover
|
||||
v-model:show="show.lightTheme"
|
||||
:actions="t('actions')"
|
||||
placement="bottom-start"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.lightTheme = true">
|
||||
{{ t('lightTheme') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
<van-popover
|
||||
v-model:show="show.darkTheme"
|
||||
theme="dark"
|
||||
:actions="t('actions')"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.darkTheme = true">
|
||||
{{ t('darkTheme') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('placement')">
|
||||
<van-field
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
:label="t('choosePlacement')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<demo-block :title="t('placement')">
|
||||
<van-field
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
:label="t('choosePlacement')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
|
||||
<van-popup
|
||||
v-model="showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
>
|
||||
<div class="demo-popover-box">
|
||||
<van-popover
|
||||
v-model="show.placement"
|
||||
theme="dark"
|
||||
:actions="t('shortActions')"
|
||||
:placement="currentPlacement"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="demo-popover-refer" />
|
||||
</template>
|
||||
</van-popover>
|
||||
</div>
|
||||
<van-picker :columns="placements" @change="onPickerChange" />
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('actionOptions')">
|
||||
<van-popover
|
||||
v-model="show.showIcon"
|
||||
:actions="t('actionsWithIcon')"
|
||||
placement="bottom-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.showIcon = true">
|
||||
{{ t('showIcon') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
|
||||
<van-popover
|
||||
v-model="show.disableAction"
|
||||
:actions="t('actionsDisabled')"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.disableAction = true">
|
||||
{{ t('disableAction') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customContent')">
|
||||
<van-popover
|
||||
v-model="show.customContent"
|
||||
placement="top-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<van-grid
|
||||
square
|
||||
clickable
|
||||
:border="false"
|
||||
column-num="3"
|
||||
style="width: 240px;"
|
||||
<van-popup
|
||||
v-model:show="showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
>
|
||||
<div class="demo-popover-box">
|
||||
<van-popover
|
||||
v-model:show="show.placement"
|
||||
theme="dark"
|
||||
:actions="t('shortActions')"
|
||||
:placement="currentPlacement"
|
||||
@select="onSelect"
|
||||
>
|
||||
<van-grid-item
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('option')"
|
||||
@click="show.customContent = false"
|
||||
/>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.customContent = true">
|
||||
{{ t('customContent') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
<template #reference>
|
||||
<div class="demo-popover-refer" />
|
||||
</template>
|
||||
</van-popover>
|
||||
</div>
|
||||
<van-picker
|
||||
:columns="placements"
|
||||
:show-toolbar="false"
|
||||
@change="onPickerChange"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('actionOptions')">
|
||||
<van-popover
|
||||
v-model:show="show.showIcon"
|
||||
:actions="t('actionsWithIcon')"
|
||||
placement="bottom-start"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.showIcon = true">
|
||||
{{ t('showIcon') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
|
||||
<van-popover
|
||||
v-model:show="show.disableAction"
|
||||
:actions="t('actionsDisabled')"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.disableAction = true">
|
||||
{{ t('disableAction') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customContent')">
|
||||
<van-popover
|
||||
v-model:show="show.customContent"
|
||||
placement="top-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<van-grid
|
||||
square
|
||||
clickable
|
||||
:border="false"
|
||||
column-num="3"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<van-grid-item
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('option')"
|
||||
@click="show.customContent = false"
|
||||
/>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.customContent = true">
|
||||
{{ t('customContent') }}
|
||||
</van-button>
|
||||
</template>
|
||||
</van-popover>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -209,7 +207,7 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onPickerChange(picker, value) {
|
||||
onPickerChange(value) {
|
||||
setTimeout(() => {
|
||||
this.show.placement = true;
|
||||
this.currentPlacement = value;
|
||||
@ -233,6 +231,10 @@ export default {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.van-popover__wrapper {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.van-field {
|
||||
width: auto;
|
||||
margin: 0 12px;
|
||||
@ -244,6 +246,10 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 110px 0;
|
||||
|
||||
.van-popover__wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { createPopper } from '@popperjs/core/lib/popper-lite';
|
||||
import offsetModifier from '@popperjs/core/lib/modifiers/offset';
|
||||
import extendsHelper from '@babel/runtime/helpers/esm/extends';
|
||||
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { BORDER_BOTTOM } from '../utils/constant';
|
||||
|
||||
// Mixins
|
||||
import { ClickOutsideMixin } from '../mixins/click-outside';
|
||||
// Composition
|
||||
import { useClickAway } from '@vant/use';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
@ -21,15 +24,10 @@ if (!Object.assign) {
|
||||
const [createComponent, bem] = createNamespace('popover');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
ClickOutsideMixin({
|
||||
event: 'touchstart',
|
||||
method: 'onClickOutside',
|
||||
}),
|
||||
],
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: Boolean,
|
||||
show: Boolean,
|
||||
overlay: Boolean,
|
||||
textColor: String,
|
||||
backgroundColor: String,
|
||||
@ -49,8 +47,8 @@ export default createComponent({
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
getContainer: {
|
||||
type: [String, Function],
|
||||
teleport: {
|
||||
type: [String, Object],
|
||||
default: 'body',
|
||||
},
|
||||
closeOnClickAction: {
|
||||
@ -59,26 +57,16 @@ export default createComponent({
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: 'updateLocation',
|
||||
placement: 'updateLocation',
|
||||
},
|
||||
emits: ['select', 'touchstart', 'update:show'],
|
||||
|
||||
mounted() {
|
||||
this.updateLocation();
|
||||
},
|
||||
setup(props, { emit, slots, attrs }) {
|
||||
let popper;
|
||||
const wrapperRef = ref();
|
||||
const popoverRef = ref();
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.popper) {
|
||||
this.popper.destroy();
|
||||
this.popper = null;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
createPopper() {
|
||||
return createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
|
||||
placement: this.placement,
|
||||
const createPopperInstance = () => {
|
||||
return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
|
||||
placement: props.placement,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'computeStyles',
|
||||
@ -90,111 +78,99 @@ export default createComponent({
|
||||
{
|
||||
...offsetModifier,
|
||||
options: {
|
||||
offset: this.offset,
|
||||
offset: props.offset,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
updateLocation() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.value) {
|
||||
const updateLocation = () => {
|
||||
nextTick(() => {
|
||||
if (!props.show) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.popper) {
|
||||
this.popper = this.createPopper();
|
||||
if (!popper) {
|
||||
popper = createPopperInstance();
|
||||
} else {
|
||||
this.popper.setOptions({
|
||||
placement: this.placement,
|
||||
popper.setOptions({
|
||||
placement: props.placement,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
renderAction(action, index) {
|
||||
const toggle = (value) => {
|
||||
emit('update:show', value);
|
||||
};
|
||||
|
||||
const onTouchstart = (event) => {
|
||||
event.stopPropagation();
|
||||
emit('touchstart', event);
|
||||
};
|
||||
|
||||
const onClickAction = (action, index) => {
|
||||
if (action.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('select', action, index);
|
||||
|
||||
if (props.closeOnClickAction) {
|
||||
toggle(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickAway = () => {
|
||||
toggle(false);
|
||||
};
|
||||
|
||||
const renderAction = (action, index) => {
|
||||
const { icon, text, disabled, className } = action;
|
||||
return (
|
||||
<div
|
||||
class={[bem('action', { disabled, 'with-icon': icon }), className]}
|
||||
onClick={() => this.onClickAction(action, index)}
|
||||
onClick={() => onClickAction(action, index)}
|
||||
>
|
||||
{icon && <Icon name={icon} class={bem('action-icon')} />}
|
||||
<div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
onToggle(value) {
|
||||
this.$emit('input', value);
|
||||
},
|
||||
|
||||
onTouchstart(event) {
|
||||
event.stopPropagation();
|
||||
this.$emit('touchstart', event);
|
||||
},
|
||||
|
||||
onClickAction(action, index) {
|
||||
if (action.disabled) {
|
||||
return;
|
||||
onMounted(updateLocation);
|
||||
onBeforeUnmount(() => {
|
||||
if (popper) {
|
||||
popper.destroy();
|
||||
popper = null;
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('select', action, index);
|
||||
watch([() => props.show, () => props.placement], updateLocation);
|
||||
|
||||
if (this.closeOnClickAction) {
|
||||
this.$emit('input', false);
|
||||
}
|
||||
},
|
||||
useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
|
||||
|
||||
onClickOutside() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
|
||||
onOpen() {
|
||||
this.$emit('open');
|
||||
},
|
||||
|
||||
/* istanbul ignore next */
|
||||
onOpened() {
|
||||
this.$emit('opened');
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
/* istanbul ignore next */
|
||||
onClosed() {
|
||||
this.$emit('closed');
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span ref="wrapper" class={bem('wrapper')}>
|
||||
return () => (
|
||||
<span ref={wrapperRef} class={bem('wrapper')}>
|
||||
<Popup
|
||||
ref="popover"
|
||||
value={this.value}
|
||||
class={bem([this.theme])}
|
||||
overlay={this.overlay}
|
||||
ref={popoverRef}
|
||||
show={props.show}
|
||||
class={bem([props.theme])}
|
||||
overlay={props.overlay}
|
||||
position={null}
|
||||
teleport={props.teleport}
|
||||
transition="van-popover-zoom"
|
||||
lockScroll={false}
|
||||
getContainer={this.getContainer}
|
||||
onOpen={this.onOpen}
|
||||
onClose={this.onClose}
|
||||
onInput={this.onToggle}
|
||||
onOpened={this.onOpened}
|
||||
onClosed={this.onClosed}
|
||||
nativeOnTouchstart={this.onTouchstart}
|
||||
onTouchstart={onTouchstart}
|
||||
{...{ ...attrs, 'onUpdate:show': toggle }}
|
||||
>
|
||||
<div class={bem('arrow')} />
|
||||
<div class={bem('content')}>
|
||||
{this.slots('default') || this.actions.map(this.renderAction)}
|
||||
{slots.default ? slots.default() : props.actions.map(renderAction)}
|
||||
</div>
|
||||
</Popup>
|
||||
{this.slots('reference')}
|
||||
{slots.reference?.()}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
@ -253,7 +253,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-enter,
|
||||
&-zoom-enter-from,
|
||||
&-zoom-leave-active {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
|
||||
@ -14,6 +14,7 @@ import { createNamespace, isDef } from '../utils';
|
||||
|
||||
// Composition
|
||||
import { useEventListener } from '@vant/use';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
import { useLockScroll } from '../composables/use-lock-scroll';
|
||||
import { useLazyRender } from '../composables/use-lazy-render';
|
||||
|
||||
@ -108,6 +109,7 @@ export default createComponent({
|
||||
let shouldReopen;
|
||||
|
||||
const zIndex = ref();
|
||||
const popupRef = ref();
|
||||
|
||||
const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
|
||||
|
||||
@ -194,6 +196,7 @@ export default createComponent({
|
||||
return (
|
||||
<div
|
||||
v-show={props.show}
|
||||
ref={popupRef}
|
||||
style={style.value}
|
||||
class={bem({
|
||||
round,
|
||||
@ -239,6 +242,8 @@ export default createComponent({
|
||||
}
|
||||
);
|
||||
|
||||
useExpose({ popupRef });
|
||||
|
||||
useEventListener('popstate', () => {
|
||||
if (props.closeOnPopstate) {
|
||||
close();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user