mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat: Popup component
This commit is contained in:
chenjiahan
parent
2a41dcf58e
commit
57e035bb26
5
breaking-changes.md
Normal file
5
breaking-changes.md
Normal file
@ -0,0 +1,5 @@
|
||||
# 不兼容更新
|
||||
|
||||
## Popup
|
||||
|
||||
- v-model 调整为 v-model:show
|
||||
@ -1,9 +1,6 @@
|
||||
import { OverlayConfig } from './overlay';
|
||||
|
||||
export type StackItem = {
|
||||
vm: any;
|
||||
overlay: any;
|
||||
config: OverlayConfig;
|
||||
};
|
||||
|
||||
export const context = {
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
// Context
|
||||
import { context } from './context';
|
||||
import {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
updateOverlay,
|
||||
removeOverlay,
|
||||
} from './overlay';
|
||||
|
||||
// Utils
|
||||
import { on, off, preventDefault } from '../../utils/dom/event';
|
||||
@ -19,7 +13,7 @@ import { CloseOnPopstateMixin } from '../close-on-popstate';
|
||||
|
||||
export const popupMixinProps = {
|
||||
// whether to show popup
|
||||
value: Boolean,
|
||||
show: Boolean,
|
||||
// whether to show overlay
|
||||
overlay: Boolean,
|
||||
// overlay custom style
|
||||
@ -47,20 +41,14 @@ export function PopupMixin(options = {}) {
|
||||
mixins: [
|
||||
TouchMixin,
|
||||
CloseOnPopstateMixin,
|
||||
PortalMixin({
|
||||
afterPortal() {
|
||||
if (this.overlay) {
|
||||
updateOverlay();
|
||||
}
|
||||
},
|
||||
}),
|
||||
PortalMixin({}),
|
||||
],
|
||||
|
||||
props: popupMixinProps,
|
||||
|
||||
data() {
|
||||
return {
|
||||
inited: this.value,
|
||||
inited: this.show,
|
||||
};
|
||||
},
|
||||
|
||||
@ -71,9 +59,9 @@ export function PopupMixin(options = {}) {
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
show(val) {
|
||||
const type = val ? 'open' : 'close';
|
||||
this.inited = this.inited || this.value;
|
||||
this.inited = this.inited || this.show;
|
||||
this[type]();
|
||||
|
||||
if (!options.skipToggleEvent) {
|
||||
@ -85,7 +73,7 @@ export function PopupMixin(options = {}) {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
if (this.show) {
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
@ -93,23 +81,22 @@ export function PopupMixin(options = {}) {
|
||||
/* istanbul ignore next */
|
||||
activated() {
|
||||
if (this.shouldReopen) {
|
||||
this.$emit('input', true);
|
||||
this.$emit('update:show', true);
|
||||
this.shouldReopen = false;
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.removeLock();
|
||||
removeOverlay(this);
|
||||
|
||||
if (this.getContainer) {
|
||||
removeNode(this.$el);
|
||||
removeNode(this.$refs.root);
|
||||
}
|
||||
},
|
||||
|
||||
/* istanbul ignore next */
|
||||
deactivated() {
|
||||
if (this.value) {
|
||||
if (this.show) {
|
||||
this.close();
|
||||
this.shouldReopen = true;
|
||||
}
|
||||
@ -161,16 +148,15 @@ export function PopupMixin(options = {}) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeOverlay(this);
|
||||
this.opened = false;
|
||||
this.removeLock();
|
||||
this.$emit('input', false);
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
this.touchMove(event);
|
||||
const direction = this.deltaY > 0 ? '10' : '01';
|
||||
const el = getScroller(event.target, this.$el);
|
||||
const el = getScroller(event.target, this.$refs.root);
|
||||
const { scrollHeight, offsetHeight, scrollTop } = el;
|
||||
let status = '11';
|
||||
|
||||
@ -191,29 +177,32 @@ export function PopupMixin(options = {}) {
|
||||
}
|
||||
},
|
||||
|
||||
onClickOverlay() {
|
||||
this.$emit('click-overlay');
|
||||
|
||||
if (this.closeOnClickOverlay) {
|
||||
// TODO
|
||||
// if (this.onClickOverlay) {
|
||||
// this.onClickOverlay();
|
||||
// } else {
|
||||
// this.close();
|
||||
// }
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
renderOverlay() {
|
||||
if (this.$isServer || !this.value) {
|
||||
if (this.$isServer || !this.show) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.updateZIndex(this.overlay ? 1 : 0);
|
||||
|
||||
if (this.overlay) {
|
||||
openOverlay(this, {
|
||||
zIndex: context.zIndex++,
|
||||
duration: this.duration,
|
||||
className: this.overlayClass,
|
||||
customStyle: this.overlayStyle,
|
||||
});
|
||||
} else {
|
||||
closeOverlay(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
updateZIndex(value = 0) {
|
||||
this.$el.style.zIndex = ++context.zIndex + value;
|
||||
this.$refs.root.style.zIndex = ++context.zIndex + value;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,77 +0,0 @@
|
||||
import Overlay from '../../overlay';
|
||||
import { context } from './context';
|
||||
import { mount } from '../../utils/functional';
|
||||
import { removeNode } from '../../utils/dom/node';
|
||||
|
||||
export type OverlayConfig = {
|
||||
zIndex?: number;
|
||||
className?: string;
|
||||
customStyle?: string | object[] | object;
|
||||
};
|
||||
|
||||
const defaultConfig: OverlayConfig = {
|
||||
className: '',
|
||||
customStyle: {},
|
||||
};
|
||||
|
||||
function mountOverlay(vm: any) {
|
||||
return mount(Overlay, {
|
||||
on: {
|
||||
// close popup when overlay clicked & closeOnClickOverlay is true
|
||||
click() {
|
||||
vm.$emit('click-overlay');
|
||||
|
||||
if (vm.closeOnClickOverlay) {
|
||||
if (vm.onClickOverlay) {
|
||||
vm.onClickOverlay();
|
||||
} else {
|
||||
vm.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function updateOverlay(vm: any): void {
|
||||
const item = context.find(vm);
|
||||
|
||||
if (item) {
|
||||
const el = vm.$el;
|
||||
const { config, overlay } = item;
|
||||
|
||||
if (el && el.parentNode) {
|
||||
el.parentNode.insertBefore(overlay.$el, el);
|
||||
}
|
||||
|
||||
Object.assign(overlay, defaultConfig, config, {
|
||||
show: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function openOverlay(vm: any, config: OverlayConfig): void {
|
||||
const item = context.find(vm);
|
||||
if (item) {
|
||||
item.config = config;
|
||||
} else {
|
||||
const overlay = mountOverlay(vm);
|
||||
context.stack.push({ vm, config, overlay });
|
||||
}
|
||||
|
||||
updateOverlay(vm);
|
||||
}
|
||||
|
||||
export function closeOverlay(vm: any): void {
|
||||
const item = context.find(vm);
|
||||
if (item) {
|
||||
item.overlay.show = false;
|
||||
}
|
||||
}
|
||||
|
||||
export function removeOverlay(vm: any) {
|
||||
const item = context.find(vm);
|
||||
if (item) {
|
||||
removeNode(item.overlay.$el);
|
||||
}
|
||||
}
|
||||
20
src-next/overlay/test/__snapshots__/demo.spec.js.snap
Normal file
20
src-next/overlay/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,20 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
|
||||
<div class="van-button__content"><span class="van-button__text">显示遮罩层</span></div>
|
||||
</button>
|
||||
<div class="van-overlay" style="display: none;" name="van-fade"></div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
|
||||
<div class="van-button__content"><span class="van-button__text">嵌入内容</span></div>
|
||||
</button>
|
||||
<div class="van-overlay" style="display: none;" name="van-fade">
|
||||
<div class="wrapper">
|
||||
<div class="block"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
11
src-next/overlay/test/__snapshots__/index.spec.js.snap
Normal file
11
src-next/overlay/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" name="van-fade"></div>`;
|
||||
|
||||
exports[`custom style prop 1`] = `<div class="van-overlay" style="background-color: red;" name="van-fade"></div>`;
|
||||
|
||||
exports[`default slot 1`] = `<div class="van-overlay" style="display: none;" name="van-fade">Custom Default</div>`;
|
||||
|
||||
exports[`duration prop 1`] = `<div class="van-overlay" style="animation-duration: 1s;" name="van-fade"></div>`;
|
||||
|
||||
exports[`z-index prop 1`] = `<div class="van-overlay" style="z-index: 99;" name="van-fade"></div>`;
|
||||
138
src-next/popup/README.md
Normal file
138
src-next/popup/README.md
Normal file
@ -0,0 +1,138 @@
|
||||
# Popup
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.use(Popup);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-cell is-link @click="showPopup">Show Popup</van-cell>
|
||||
<van-popup v-model:show="show">Content</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
showPopup() {
|
||||
this.show = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Position
|
||||
|
||||
Use `position` prop to set popup display position
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
|
||||
```
|
||||
|
||||
### Close Icon
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
v-model:show="show"
|
||||
closeable
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<!-- Custom Icon -->
|
||||
<van-popup
|
||||
v-model:show="show"
|
||||
closeable
|
||||
close-icon="close"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<!-- Icon Position -->
|
||||
<van-popup
|
||||
v-model:show="show"
|
||||
closeable
|
||||
close-icon-position="top-left"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
```
|
||||
|
||||
### Round Corner
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }" />
|
||||
```
|
||||
|
||||
### Get Container
|
||||
|
||||
Use `get-container` prop to specify mount location
|
||||
|
||||
```html
|
||||
<!-- mount to body -->
|
||||
<van-popup v-model:show="show" get-container="body" />
|
||||
|
||||
<!-- mount to #app -->
|
||||
<van-popup v-model:show="show" get-container="#app" />
|
||||
|
||||
<!-- Specify the mount location by function -->
|
||||
<van-popup v-model:show="show" :get-container="getContainer" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
getContainer() {
|
||||
return document.querySelector('.my-container');
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: The get-container prop cannot be used on the root node
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model:show | Whether to show popup | _boolean_ | `false` |
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` |
|
||||
| overlay-class | Custom overlay class | _string_ | - |
|
||||
| overlay-style | Custom overlay style | _object_ | - |
|
||||
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
|
||||
| round `v2.0.7` | Whether to show round corner | _boolean_ | `false` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| close-on-popstate `v2.2.10` | Whether to close when popstate | _boolean_ | `false` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
||||
| closeable `v2.2.0` | Whether to show close icon | _boolean_ | `false` |
|
||||
| close-icon `v2.2.0` | Close icon name | _string_ | `cross` |
|
||||
| close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| get-container | Return the mount node for Popup | _string \| () => Element_ | - |
|
||||
| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------------- | ---------------------------- | -------------- |
|
||||
| click | Triggered when click Popup | _event: Event_ |
|
||||
| open | Triggered when open Popup | - |
|
||||
| close | Triggered when close Popup | - |
|
||||
| opened | Triggered when opened Popup | - |
|
||||
| closed | Triggered when closed Popup | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
149
src-next/popup/README.zh-CN.md
Normal file
149
src-next/popup/README.zh-CN.md
Normal file
@ -0,0 +1,149 @@
|
||||
# Popup 弹出层
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.use(Popup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 `v-model:show` 控制弹出层是否展示
|
||||
|
||||
```html
|
||||
<van-cell is-link @click="showPopup">展示弹出层</van-cell>
|
||||
<van-popup v-model:show="show">内容</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
showPopup() {
|
||||
this.show = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 弹出位置
|
||||
|
||||
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
|
||||
```
|
||||
|
||||
### 关闭图标
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
v-model:show="show"
|
||||
closeable
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<!-- 自定义图标 -->
|
||||
<van-popup
|
||||
v-model:show="show"
|
||||
closeable
|
||||
close-icon="close"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<!-- 图标位置 -->
|
||||
<van-popup
|
||||
v-model:show="show"
|
||||
closeable
|
||||
close-icon-position="top-left"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
```
|
||||
|
||||
### 圆角弹窗
|
||||
|
||||
设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }" />
|
||||
```
|
||||
|
||||
### 指定挂载位置
|
||||
|
||||
弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置
|
||||
|
||||
```html
|
||||
<!-- 挂载到 body 节点下 -->
|
||||
<van-popup v-model:show="show" get-container="body" />
|
||||
|
||||
<!-- 挂载到 #app 节点下 -->
|
||||
<van-popup v-model:show="show" get-container="#app" />
|
||||
|
||||
<!-- 通过函数指定挂载位置 -->
|
||||
<van-popup v-model:show="show" :get-container="getContainer" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
// 返回一个特定的 DOM 节点，作为挂载的父节点
|
||||
getContainer() {
|
||||
return document.querySelector('.my-container');
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
> 注意：使用 get-container 属性的组件不能为根节点
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model:show | 是否显示弹出层 | _boolean_ | `false` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
|
||||
| overlay-class | 自定义遮罩层类名 | _string_ | - |
|
||||
| overlay-style | 自定义遮罩层样式 | _object_ | - |
|
||||
| duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
|
||||
| round `v2.0.7` | 是否显示圆角 | _boolean_ | `false` |
|
||||
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
|
||||
| close-on-popstate `v2.2.10` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| closeable `v2.2.0` | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| close-icon `v2.2.0` | 关闭图标名称或图片链接 | _string_ | `cross` |
|
||||
| close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
|
||||
| get-container | 指定挂载的节点 | _string \| () => Element_ | - |
|
||||
| safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------------- | -------------------------- | -------------- |
|
||||
| click | 点击弹出层时触发 | _event: Event_ |
|
||||
| open | 打开弹出层时触发 | - |
|
||||
| close | 关闭弹出层时触发 | - |
|
||||
| opened | 打开弹出层且动画结束后触发 | - |
|
||||
| closed | 关闭弹出层且动画结束后触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
164
src-next/popup/demo/index.vue
Normal file
164
src-next/popup/demo/index.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
|
||||
<van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
|
||||
{{ t('content') }}
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('position')">
|
||||
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
|
||||
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
|
||||
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
|
||||
<van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
|
||||
|
||||
<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
|
||||
<van-popup
|
||||
v-model:show="showBottom"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="showLeft"
|
||||
position="left"
|
||||
:style="{ width: '30%', height: '100%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="showRight"
|
||||
position="right"
|
||||
:style="{ width: '30%', height: '100%' }"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('closeIcon')">
|
||||
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
|
||||
<van-cell
|
||||
:title="t('customCloseIcon')"
|
||||
is-link
|
||||
@click="showCustomCloseIcon = true"
|
||||
/>
|
||||
<van-cell
|
||||
:title="t('customIconPosition')"
|
||||
is-link
|
||||
@click="showCustomIconPosition = true"
|
||||
/>
|
||||
|
||||
<van-popup
|
||||
v-model:show="showCloseIcon"
|
||||
closeable
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="showCustomCloseIcon"
|
||||
closeable
|
||||
close-icon="close"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="showCustomIconPosition"
|
||||
closeable
|
||||
close-icon-position="top-left"
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('roundCorner')">
|
||||
<van-cell
|
||||
:title="t('roundCorner')"
|
||||
is-link
|
||||
@click="showRoundCorner = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="showRoundCorner"
|
||||
round
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card v-if="!isWeapp" :title="t('getContainer')">
|
||||
<van-cell
|
||||
:title="t('getContainer')"
|
||||
is-link
|
||||
@click="showGetContainer = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="showGetContainer"
|
||||
get-container="body"
|
||||
:style="{ padding: '30px 50px' }"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
position: '弹出位置',
|
||||
buttonBasic: '展示弹出层',
|
||||
buttonTop: '顶部弹出',
|
||||
buttonBottom: '底部弹出',
|
||||
buttonLeft: '左侧弹出',
|
||||
buttonRight: '右侧弹出',
|
||||
getContainer: '指定挂载节点',
|
||||
roundCorner: '圆角弹窗',
|
||||
closeIcon: '关闭图标',
|
||||
customCloseIcon: '自定义图标',
|
||||
customIconPosition: '图标位置',
|
||||
},
|
||||
'en-US': {
|
||||
position: 'Position',
|
||||
buttonBasic: 'Show Popup',
|
||||
buttonTop: 'From Top',
|
||||
buttonBottom: 'From Bottom',
|
||||
buttonLeft: 'From Left',
|
||||
buttonRight: 'From Right',
|
||||
getContainer: 'Get Container',
|
||||
roundCorner: 'Round Corner',
|
||||
closeIcon: 'Close Icon',
|
||||
customCloseIcon: 'Custom Icon',
|
||||
customIconPosition: 'Icon Position',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showBasic: false,
|
||||
showTop: false,
|
||||
showBottom: false,
|
||||
showLeft: false,
|
||||
showRight: false,
|
||||
showCloseIcon: false,
|
||||
showRoundCorner: false,
|
||||
showGetContainer: false,
|
||||
showCustomCloseIcon: false,
|
||||
showCustomIconPosition: false,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
showBasic(val) {
|
||||
console.log('showBasic', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-popup {
|
||||
.van-row {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src-next/popup/index.js
Normal file
106
src-next/popup/index.js
Normal file
@ -0,0 +1,106 @@
|
||||
import { Transition } from 'vue';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
import Icon from '../icon';
|
||||
import Overlay from '../overlay';
|
||||
|
||||
const [createComponent, bem] = createNamespace('popup');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [PopupMixin()],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
round: Boolean,
|
||||
duration: [Number, String],
|
||||
closeable: Boolean,
|
||||
transition: String,
|
||||
safeAreaInsetBottom: Boolean,
|
||||
closeIcon: {
|
||||
type: String,
|
||||
default: 'cross',
|
||||
},
|
||||
closeIconPosition: {
|
||||
type: String,
|
||||
default: 'top-right',
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'center',
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
const createEmitter = (eventName) => (event) =>
|
||||
this.$emit(eventName, event);
|
||||
|
||||
this.onClick = createEmitter('click');
|
||||
this.onOpened = createEmitter('opened');
|
||||
this.onClosed = createEmitter('closed');
|
||||
},
|
||||
|
||||
render() {
|
||||
if (!this.shouldRender) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { round, position, duration } = this;
|
||||
const isCenter = position === 'center';
|
||||
|
||||
const transitionName =
|
||||
this.transition ||
|
||||
(isCenter ? 'van-fade' : `van-popup-slide-${position}`);
|
||||
|
||||
const style = {};
|
||||
if (isDef(duration)) {
|
||||
const key = isCenter ? 'animationDuration' : 'transitionDuration';
|
||||
style[key] = `${duration}s`;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{this.overlay && (
|
||||
<Overlay show={this.show} onClick={this.onClickOverlay} />
|
||||
)}
|
||||
<Transition
|
||||
name={transitionName}
|
||||
onAfterEnter={this.onOpened}
|
||||
onAfterLeave={this.onClosed}
|
||||
>
|
||||
<div
|
||||
vShow={this.show}
|
||||
ref="root"
|
||||
style={style}
|
||||
class={bem({
|
||||
round,
|
||||
[position]: position,
|
||||
'safe-area-inset-bottom': this.safeAreaInsetBottom,
|
||||
})}
|
||||
onClick={this.onClick}
|
||||
{...this.$attrs}
|
||||
>
|
||||
{this.$slots.default?.()}
|
||||
{this.closeable && (
|
||||
<Icon
|
||||
role="button"
|
||||
tabindex="0"
|
||||
name={this.closeIcon}
|
||||
class={bem('close-icon', this.closeIconPosition)}
|
||||
onClick={this.close}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
},
|
||||
});
|
||||
137
src-next/popup/index.less
Normal file
137
src-next/popup/index.less
Normal file
@ -0,0 +1,137 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van {
|
||||
&-overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
&-popup {
|
||||
position: fixed;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: @popup-background-color;
|
||||
transition: @popup-transition;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&--center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
|
||||
&.van-popup--round {
|
||||
border-radius: @popup-round-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
&.van-popup--round {
|
||||
border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
|
||||
&.van-popup--round {
|
||||
border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
&.van-popup--round {
|
||||
border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--left {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
|
||||
&.van-popup--round {
|
||||
border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--safe-area-inset-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
&-slide-top-enter-active,
|
||||
&-slide-left-enter-active,
|
||||
&-slide-right-enter-active,
|
||||
&-slide-bottom-enter-active {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
&-slide-top-leave-active,
|
||||
&-slide-left-leave-active,
|
||||
&-slide-right-leave-active,
|
||||
&-slide-bottom-leave-active {
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
&-slide-top-enter,
|
||||
&-slide-top-leave-active {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
&-slide-right-enter,
|
||||
&-slide-right-leave-active {
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
|
||||
&-slide-bottom-enter,
|
||||
&-slide-bottom-leave-active {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
&-slide-left-enter,
|
||||
&-slide-left-leave-active {
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
position: absolute;
|
||||
z-index: @popup-close-icon-z-index;
|
||||
color: @popup-close-icon-color;
|
||||
font-size: @popup-close-icon-size;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
color: @popup-close-icon-active-color;
|
||||
}
|
||||
|
||||
&--top-left {
|
||||
top: @popup-close-icon-margin;
|
||||
left: @popup-close-icon-margin;
|
||||
}
|
||||
|
||||
&--top-right {
|
||||
top: @popup-close-icon-margin;
|
||||
right: @popup-close-icon-margin;
|
||||
}
|
||||
|
||||
&--bottom-left {
|
||||
bottom: @popup-close-icon-margin;
|
||||
left: @popup-close-icon-margin;
|
||||
}
|
||||
|
||||
&--bottom-right {
|
||||
right: @popup-close-icon-margin;
|
||||
bottom: @popup-close-icon-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
src-next/popup/test/__snapshots__/demo.spec.js.snap
Normal file
65
src-next/popup/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,65 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>展示弹出层</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>顶部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>底部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>左侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>右侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>关闭图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>图标位置</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>圆角弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>指定挂载节点</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
14
src-next/popup/test/__snapshots__/index.spec.js.snap
Normal file
14
src-next/popup/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`close-icon prop 1`] = `
|
||||
<div class="van-popup van-popup--center" name="van-fade"><i role="button" tabindex="0" class="van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`duration prop when position is center 1`] = `<div class="van-popup van-popup--center" style="animation-duration: 0.5s;" name="van-fade"></div>`;
|
||||
|
||||
exports[`duration prop when position is top 1`] = `<div class="van-popup van-popup--top" style="transition-duration: 0.5s;" name="van-popup-slide-top"></div>`;
|
||||
|
||||
exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;
|
||||
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--center" name="van-fade"></div>`;
|
||||
4
src-next/popup/test/demo.spec.js
Normal file
4
src-next/popup/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
265
src-next/popup/test/index.spec.js
Normal file
265
src-next/popup/test/index.spec.js
Normal file
@ -0,0 +1,265 @@
|
||||
import Popup from '..';
|
||||
import { mount, triggerDrag, later } from '../../../test';
|
||||
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
test('lazy render', () => {
|
||||
wrapper = mount(Popup);
|
||||
expect(wrapper.vm.$el.tagName).toBeFalsy();
|
||||
wrapper.vm.value = true;
|
||||
expect(wrapper.vm.$el.tagName).toBeTruthy();
|
||||
});
|
||||
|
||||
test('reset z-index', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
zIndex: 10,
|
||||
lockScroll: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('popup lock scroll', () => {
|
||||
const wrapper1 = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
triggerDrag(document, 0, 100);
|
||||
triggerDrag(document, 0, -150);
|
||||
|
||||
const wrapper2 = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
wrapper1.vm.$destroy();
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
|
||||
wrapper2.vm.$destroy();
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('get container with parent', () => {
|
||||
const div1 = document.createElement('div');
|
||||
const div2 = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="true" :get-container="getContainer" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getContainer: () => div1,
|
||||
};
|
||||
},
|
||||
});
|
||||
const popup = wrapper.find('.van-popup').element;
|
||||
|
||||
expect(popup.parentNode).toEqual(div1);
|
||||
wrapper.vm.getContainer = () => div2;
|
||||
expect(popup.parentNode).toEqual(div2);
|
||||
wrapper.vm.getContainer = null;
|
||||
expect(popup.parentNode).toEqual(wrapper.element);
|
||||
});
|
||||
|
||||
test('get container with selector', () => {
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup class="get-container-selector-1" :value="true" get-container="body"></popup>
|
||||
<popup class="get-container-selector-2" :value="true" get-container="unknown"></popup>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
});
|
||||
|
||||
const dom1 = document.querySelector('.get-container-selector-1');
|
||||
const dom2 = wrapper.vm.$el.querySelector('.get-container-selector-2');
|
||||
|
||||
expect(dom1.parentNode).toEqual(document.body);
|
||||
expect(dom2.parentNode).toEqual(wrapper.vm.$el);
|
||||
});
|
||||
|
||||
test('render overlay', async () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="true" :get-container="getContainer" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getContainer: () => div,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('watch overlay prop', async () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="show" :overlay="overlay" :get-container="getContainer" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
overlay: false,
|
||||
getContainer: () => div,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ overlay: true });
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ show: true });
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('close on click overlay', async () => {
|
||||
const div = document.createElement('div');
|
||||
const onClickOverlay = jest.fn();
|
||||
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup
|
||||
v-model="value"
|
||||
:get-container="getContainer"
|
||||
@click-overlay="onClickOverlay"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: true,
|
||||
getContainer: () => div,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClickOverlay,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const modal = div.querySelector('.van-overlay');
|
||||
triggerDrag(modal, 0, -30);
|
||||
modal.click();
|
||||
|
||||
expect(wrapper.vm.value).toBeFalsy();
|
||||
expect(onClickOverlay).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('open & close event', () => {
|
||||
const wrapper = mount(Popup);
|
||||
wrapper.vm.value = true;
|
||||
expect(wrapper.emitted('open')).toBeTruthy();
|
||||
wrapper.vm.value = false;
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('click event', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.emitted('click')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('duration prop when position is center', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
duration: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('duration prop when position is top', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
duration: 0.5,
|
||||
position: 'top',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('round prop', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
round: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('closeable prop', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
closeable: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popup__close-icon').trigger('click');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(false);
|
||||
});
|
||||
|
||||
test('close-icon prop', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
closeable: true,
|
||||
closeIcon: 'success',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@ -1,10 +1,10 @@
|
||||
import { isServer } from '..';
|
||||
import { inBrowser } from '..';
|
||||
import { EventHandler } from '../types';
|
||||
|
||||
// eslint-disable-next-line import/no-mutable-exports
|
||||
export let supportsPassive = false;
|
||||
|
||||
if (!isServer) {
|
||||
if (inBrowser) {
|
||||
try {
|
||||
const opts = {};
|
||||
Object.defineProperty(opts, 'passive', {
|
||||
@ -25,7 +25,7 @@ export function on(
|
||||
handler: EventHandler,
|
||||
passive = false
|
||||
) {
|
||||
if (!isServer) {
|
||||
if (inBrowser) {
|
||||
target.addEventListener(
|
||||
event,
|
||||
handler,
|
||||
@ -35,7 +35,7 @@ export function on(
|
||||
}
|
||||
|
||||
export function off(target: EventTarget, event: string, handler: EventHandler) {
|
||||
if (!isServer) {
|
||||
if (inBrowser) {
|
||||
target.removeEventListener(event, handler);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,8 @@ export { createNamespace } from './create';
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
export function noop() {}
|
||||
|
||||
export const inBrowser = typeof window !== 'undefined'
|
||||
|
||||
export function isDef(val: unknown): boolean {
|
||||
return val !== undefined && val !== null;
|
||||
}
|
||||
|
||||
@ -98,10 +98,10 @@ module.exports = {
|
||||
path: 'col',
|
||||
title: 'Layout 布局',
|
||||
},
|
||||
// {
|
||||
// path: 'popup',
|
||||
// title: 'Popup 弹出层',
|
||||
// },
|
||||
{
|
||||
path: 'popup',
|
||||
title: 'Popup 弹出层',
|
||||
},
|
||||
{
|
||||
path: 'style',
|
||||
title: 'Style 内置样式',
|
||||
@ -200,10 +200,10 @@ module.exports = {
|
||||
// path: 'notify',
|
||||
// title: 'Notify 消息通知',
|
||||
// },
|
||||
// {
|
||||
// path: 'overlay',
|
||||
// title: 'Overlay 遮罩层',
|
||||
// },
|
||||
{
|
||||
path: 'overlay',
|
||||
title: 'Overlay 遮罩层',
|
||||
},
|
||||
// {
|
||||
// path: 'pull-refresh',
|
||||
// title: 'PullRefresh 下拉刷新',
|
||||
@ -534,10 +534,10 @@ module.exports = {
|
||||
// path: 'notify',
|
||||
// title: 'Notify',
|
||||
// },
|
||||
// {
|
||||
// path: 'overlay',
|
||||
// title: 'Overlay',
|
||||
// },
|
||||
{
|
||||
path: 'overlay',
|
||||
title: 'Overlay',
|
||||
},
|
||||
// {
|
||||
// path: 'pull-refresh',
|
||||
// title: 'PullRefresh',
|
||||
|
||||
@ -4,6 +4,7 @@ module.exports = function () {
|
||||
}
|
||||
|
||||
return {
|
||||
devtool: 'none',
|
||||
entry: {
|
||||
'site-mobile': ['./docs/site/mobile'],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user