[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showBasic = true"
|
||||
>
|
||||
{{ $t('buttonBasic') }}
|
||||
</van-button>
|
||||
<van-popup
|
||||
v-model="showBasic"
|
||||
:style="{ padding: '30px 50px' }"
|
||||
>
|
||||
{{ $t('content') }}
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('position')">
|
||||
<van-row>
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showTop = true"
|
||||
>
|
||||
{{ $t('buttonTop') }}
|
||||
</van-button>
|
||||
|
||||
<van-popup
|
||||
v-model="showTop"
|
||||
position="top"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showBottom = true"
|
||||
>
|
||||
{{ $t('buttonBottom') }}
|
||||
</van-button>
|
||||
|
||||
<van-popup
|
||||
v-model="showBottom"
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
</van-row>
|
||||
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showLeft = true"
|
||||
>
|
||||
{{ $t('buttonLeft') }}
|
||||
</van-button>
|
||||
|
||||
<van-popup
|
||||
v-model="showLeft"
|
||||
position="left"
|
||||
:style="{ width: '20%', height: '100%' }"
|
||||
/>
|
||||
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showRight = true"
|
||||
>
|
||||
{{ $t('buttonRight') }}
|
||||
</van-button>
|
||||
|
||||
<van-popup
|
||||
v-model="showRight"
|
||||
position="right"
|
||||
:style="{ width: '20%', height: '100%' }"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block
|
||||
v-if="!$attrs.weapp"
|
||||
:title="$t('getContainer')"
|
||||
>
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showGetContainer = true"
|
||||
>
|
||||
{{ $t('getContainer') }}
|
||||
</van-button>
|
||||
<van-popup
|
||||
v-model="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: '指定挂载节点'
|
||||
},
|
||||
'en-US': {
|
||||
position: 'Position',
|
||||
buttonBasic: 'Show Popup',
|
||||
buttonTop: 'From Top',
|
||||
buttonBottom: 'From Bottom',
|
||||
buttonLeft: 'From Left',
|
||||
buttonRight: 'From Right',
|
||||
getContainer: 'Get Container'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showBasic: false,
|
||||
showTop: false,
|
||||
showBottom: false,
|
||||
showLeft: false,
|
||||
showRight: false,
|
||||
showGetContainer: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-popup {
|
||||
.van-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
# Popup
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.use(Popup);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-button type="primary" @click="showPopup">
|
||||
Show Popup
|
||||
</van-button>
|
||||
|
||||
<van-popup v-model="show">Content</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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"
|
||||
position="top"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
```
|
||||
|
||||
### Get Container
|
||||
|
||||
Use `get-container` prop to specify mount location
|
||||
|
||||
```html
|
||||
<!-- mount to body -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
get-container="body"
|
||||
/>
|
||||
|
||||
<!-- mount to #app -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
get-container="#app"
|
||||
/>
|
||||
|
||||
<!-- Specify the mount location by function -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
:get-container="getContainer"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
getContainer() {
|
||||
return document.querySelector('.my-container');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | 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` | - |
|
||||
| close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` |
|
||||
| transition | Transition | `String` | `popup-slide` |
|
||||
| duration | Transition duration, unit second | `Number` | `0.3` |
|
||||
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
|
||||
| get-container | Return the mount node for Popup | `String | () => HTMLElement` | - |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click Popup | - |
|
||||
| open | Triggered when open Popup | - |
|
||||
| opened | Triggered when opened Popup | - |
|
||||
| close | Triggered when close Popup | - |
|
||||
| closed | Triggered when closed Popup | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
@@ -0,0 +1,70 @@
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
|
||||
const [createComponent, bem] = createNamespace('popup');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [PopupMixin],
|
||||
|
||||
props: {
|
||||
transition: String,
|
||||
duration: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
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(h) {
|
||||
if (!this.shouldRender) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { position, duration } = this;
|
||||
|
||||
const transitionName =
|
||||
this.transition ||
|
||||
(position === 'center' ? 'van-fade' : `van-popup-slide-${position}`);
|
||||
|
||||
const style = {};
|
||||
if (isDef(duration)) {
|
||||
style.transitionDuration = `${duration}s`;
|
||||
}
|
||||
|
||||
return (
|
||||
<transition
|
||||
name={transitionName}
|
||||
onAfterEnter={this.onOpened}
|
||||
onAfterLeave={this.onClosed}
|
||||
>
|
||||
<div
|
||||
vShow={this.value}
|
||||
style={style}
|
||||
class={bem({ [position]: position })}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{this.slots()}
|
||||
</div>
|
||||
</transition>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
@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);
|
||||
}
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--left {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
&-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
展示弹出层
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
顶部弹出
|
||||
</span></button>
|
||||
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
底部弹出
|
||||
</span></button>
|
||||
<!---->
|
||||
</div> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
左侧弹出
|
||||
</span></button>
|
||||
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
右侧弹出
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
指定挂载节点
|
||||
</span></button> </div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`duration prop 1`] = `<div class="van-popup van-popup--center" style="transition-duration: 0.5s;" name="van-fade"></div>`;
|
||||
|
||||
exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,213 @@
|
||||
import Popup from '..';
|
||||
import { mount, triggerDrag, transitionStub } from '../../../test/utils';
|
||||
|
||||
transitionStub();
|
||||
|
||||
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', () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="true" :get-container="getContainer" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getContainer: () => div
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('watch overlay prop', () => {
|
||||
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
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ overlay: true });
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ show: true });
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('close on click overlay', () => {
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
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', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
duration: 0.5
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,119 @@
|
||||
# Popup 弹出层
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.use(Popup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`控制弹出层是否展示
|
||||
|
||||
```html
|
||||
<van-button type="primary" @click="showPopup">
|
||||
展示弹出层
|
||||
</van-button>
|
||||
|
||||
<van-popup v-model="show">内容</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showPopup() {
|
||||
this.show = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 弹出位置
|
||||
|
||||
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
v-model="show"
|
||||
position="top"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
```
|
||||
|
||||
### 指定挂载位置
|
||||
|
||||
弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置
|
||||
|
||||
```html
|
||||
<!-- 挂载到 body 节点下 -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
get-container="body"
|
||||
/>
|
||||
|
||||
<!-- 挂载到 #app 节点下 -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
get-container="#app"
|
||||
/>
|
||||
|
||||
<!-- 通过函数指定挂载位置 -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
:get-container="getContainer"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
// 返回一个特定的 DOM 节点，作为挂载的父节点
|
||||
getContainer() {
|
||||
return document.querySelector('.my-container');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
|
||||
| position | 位置，可选值为 `top` `bottom` <br> `right` `left` | `String` | `center` | - |
|
||||
| overlay-class | 自定义遮罩层类名 | `String` | - | - |
|
||||
| overlay-style | 自定义遮罩层样式 | `Object` | - | - |
|
||||
| transition | 动画类名，用法与原生`transtion`组件的`name`属性一致 | `String` | - | - |
|
||||
| duration | 动画时长，单位秒 | `Number` | `0.3` | 2.0.0 |
|
||||
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | `Boolean` | `true` | - |
|
||||
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | 1.0.0 |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.5 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击弹出层时触发 | - |
|
||||
| open | 打开弹出层时触发 | - |
|
||||
| opened | 打开弹出层且动画结束后触发 | - |
|
||||
| close | 关闭弹出层时触发 | - |
|
||||
| closed | 关闭弹出层且动画结束后触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
Reference in New Issue
Block a user