|
|
@@ -0,0 +1,199 @@
|
|
|
+# Popup
|
|
|
+
|
|
|
+### Intro
|
|
|
+
|
|
|
+The pop-up layer container is used to display pop-up windows, information prompts and other contents, and supports the superposition display of multiple pop-up layers
|
|
|
+
|
|
|
+### Install
|
|
|
+
|
|
|
+```javascript
|
|
|
+import { createApp } from 'vue';
|
|
|
+//vue
|
|
|
+import { Popup,OverLay } from '@nutui/nutui';
|
|
|
+//taro
|
|
|
+import { Popup,OverLay } from '@nutui/nutui-taro';
|
|
|
+
|
|
|
+const app = createApp();
|
|
|
+app.use(Popup).use(OverLay)
|
|
|
+```
|
|
|
+
|
|
|
+### Basic Usage
|
|
|
+
|
|
|
+`visible` Control show / hide
|
|
|
+
|
|
|
+:::demo
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <nut-cell title="Show pop-up layer" is-link @click="state.showBasic = true"></nut-cell>
|
|
|
+ <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="state.showBasic" :z-index="100">text</nut-popup>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { reactive } from 'vue';
|
|
|
+ export default {
|
|
|
+ props: {},
|
|
|
+ setup() {
|
|
|
+ const state = reactive({
|
|
|
+ showBasic: false
|
|
|
+ });
|
|
|
+ return { state };
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+:::
|
|
|
+
|
|
|
+### Eject position
|
|
|
+
|
|
|
+:::demo
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <nut-cell title="Top pop-up" is-link @click="state.showTop = true"></nut-cell>
|
|
|
+ <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="state.showTop"></nut-popup>
|
|
|
+ <nut-cell title="Bottom pop-up" is-link @click="state.showBottom = true"></nut-cell>
|
|
|
+ <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="state.showBottom"></nut-popup>
|
|
|
+ <nut-cell title="Left pop-up" is-link @click="state.showLeft = true"></nut-cell>
|
|
|
+ <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="state.showLeft"></nut-popup>
|
|
|
+ <nut-cell title="Right pop-up" is-link @click="state.showRight = true"></nut-cell>
|
|
|
+ <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="state.showRight"></nut-popup>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { reactive } from 'vue';
|
|
|
+ export default {
|
|
|
+ props: {},
|
|
|
+ setup() {
|
|
|
+ const state = reactive({
|
|
|
+ showTop: false,
|
|
|
+ showBottom: false,
|
|
|
+ showLeft: false,
|
|
|
+ showRight: false,
|
|
|
+ });
|
|
|
+ return { state };
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+:::
|
|
|
+
|
|
|
+### Icon
|
|
|
+
|
|
|
+
|
|
|
+:::demo
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <nut-cell title="Close icon" is-link @click="state.showIcon = true"></nut-cell>
|
|
|
+ <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="state.showIcon"></nut-popup>
|
|
|
+ <nut-cell title="Icon location" is-link @click="state.showIconPosition = true" ></nut-cell>
|
|
|
+ <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="state.showIconPosition" ></nut-popup>
|
|
|
+ <nut-cell title="Custom icon" is-link @click="state.showCloseIcon = true" ></nut-cell>
|
|
|
+ <nut-popup position="bottom" closeable close-icon-position="top-left" close-icon="heart" :style="{ height: '20%' }" v-model:visible="state.showCloseIcon"></nut-popup>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { reactive } from 'vue';
|
|
|
+ export default {
|
|
|
+ props: {},
|
|
|
+ setup() {
|
|
|
+ const state = reactive({
|
|
|
+ showIcon: false,
|
|
|
+ showIconPosition: false,
|
|
|
+ showCloseIcon: false,
|
|
|
+ });
|
|
|
+ return { state };
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+:::
|
|
|
+
|
|
|
+### Rounded bullet frame
|
|
|
+
|
|
|
+:::demo
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <nut-cell title="Rounded pop-up" is-link @click="state.showRound = true"></nut-cell>
|
|
|
+ <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="state.showRound"></nut-popup>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { reactive } from 'vue';
|
|
|
+ export default {
|
|
|
+ props: {},
|
|
|
+ setup() {
|
|
|
+ const state = reactive({
|
|
|
+ showRound: false,
|
|
|
+ });
|
|
|
+ return { state };
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+:::
|
|
|
+
|
|
|
+### Specify mount node
|
|
|
+
|
|
|
+:::demo
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <nut-cell title="Specify mount node" is-link @click="state.showTeleport = true"></nut-cell>
|
|
|
+ <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="state.showTeleport" >app</nut-popup>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { reactive } from 'vue';
|
|
|
+ export default {
|
|
|
+ props: {},
|
|
|
+ setup() {
|
|
|
+ const state = reactive({
|
|
|
+ showTeleport: false,
|
|
|
+ });
|
|
|
+ return { state };
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+:::
|
|
|
+
|
|
|
+## API
|
|
|
+
|
|
|
+### Props
|
|
|
+
|
|
|
+| Attribute | Description | Type | Default |
|
|
|
+|------------------------|-------------------------------------------------------------|----------------|---------------|
|
|
|
+| v-model:visible | Whether the current component is displayed | Boolean | `false` |
|
|
|
+| z-index | Mask level | String、Number | `2000` |
|
|
|
+| duration | Animation duration，Unit second | String、Number | `0.3` |
|
|
|
+| overlay-class | Custom mask classname | String | - |
|
|
|
+| overlay-style | Custom mask style | CSSProperties | - |
|
|
|
+| lock-scroll | Whether the background is locked | Boolean | `true` |
|
|
|
+| overlay | Show mask | Boolean | `true` |
|
|
|
+| close-on-click-overlay | Click to close the mask | Boolean | `true` |
|
|
|
+| position | Eject position（top,bottom,left,right,center） | String | `"center"` |
|
|
|
+| transition | Animation name | String | - |
|
|
|
+| style | Custom pop-up style | CSSProperties | - |
|
|
|
+| pop-class | Custom bullet box classname | String | - |
|
|
|
+| closeable | Show close button | Boolean | `false` |
|
|
|
+| close-icon-position | Close button position（top-left,top-right,bottom-left,bottom-right） | String | `"top-right"` |
|
|
|
+| close-icon | Custom Icon | String | `"close"` |
|
|
|
+| destroy-on-close | Will the contents of `slot` be cleared after the bullet layer is closed | Boolean | `true` |
|
|
|
+| round | Show fillet | Boolean | `false` |
|
|
|
+| teleport | Specify the mount node (`not supported by miniProgram') | String | `"body"` |
|
|
|
+| safe-area-inset-bottom `v3.1.19` | Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is `bottom` | Boolean |`false` |
|
|
|
+
|
|
|
+### Events
|
|
|
+
|
|
|
+| Event | Description | Arguments |
|
|
|
+|------------------|------------------------|----------------|
|
|
|
+| click | Triggered when the pop-up box is clicked | `event: Event` |
|
|
|
+| click-close-icon | Triggered when the close icon is clicked | `event: Event` |
|
|
|
+| open | Triggered when the pop-up box is opened | - |
|
|
|
+| close | Triggered when the pop-up box is closed | - |
|
|
|
+| opend | Triggered at the end of the mask open animation | `event: Event` |
|
|
|
+| closed | Triggered when the mask closes and the animation ends | `event: Event` |
|
|
|
+| click-overlay | Click mask trigger | `event: Event` |
|
suzigang