130 lines
7.4 KiB
Markdown
130 lines
7.4 KiB
Markdown
|
# Curtain
|
||
|
|
|
||
|
|
Generally used for announcement-type image popups.
|
||
|
|
|
||
|
|
## Basic Usage
|
||
|
|
|
||
|
|
Set display and hide through the `v-model` property, which is required.
|
||
|
|
|
||
|
|
`src` is the curtain image URL (only online URLs are supported), value type is `string`, required.
|
||
|
|
|
||
|
|
`to` is the link to visit when clicking the curtain, value type is `string`, optional.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-button @click="handleClick">Show Curtain</wd-button>
|
||
|
|
<wd-curtain v-model="value" :src="img" :to="link"></wd-curtain>
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const value = ref<boolean>(false)
|
||
|
|
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
|
||
|
|
const link = ref<string>('/pages/index/index')
|
||
|
|
|
||
|
|
function handleClick() {
|
||
|
|
value.value = true
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Set Curtain Image Width and Height
|
||
|
|
|
||
|
|
Set `width`, the default height is calculated based on the original image ratio and the input `width`, required.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-button @click="handleClick">Show Curtain</wd-button>
|
||
|
|
<wd-curtain v-model="value" :src="img" :to="link" width="280"></wd-curtain>
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const value = ref<boolean>(false)
|
||
|
|
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
|
||
|
|
const link = ref<string>('/pages/index/index')
|
||
|
|
|
||
|
|
function handleClick() {
|
||
|
|
value.value = true
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Modify Close Button Position
|
||
|
|
|
||
|
|
Set `close-position`, default is 'inset', available values are 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-button @click="handleClick">Show Curtain</wd-button>
|
||
|
|
<wd-curtain v-model="value" :src="img" :to="link" close-position="top" width="280"></wd-curtain>
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const value = ref<boolean>(false)
|
||
|
|
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
|
||
|
|
const link = ref<string>('/pages/index/index')
|
||
|
|
|
||
|
|
function handleClick() {
|
||
|
|
value.value = true
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Set Mask Click to Close Curtain
|
||
|
|
|
||
|
|
Set the `close-on-click-modal` property, value type is `boolean`, optional.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-button @click="handleClick">Show Curtain</wd-button>
|
||
|
|
<wd-curtain v-model="value" :src="img" :to="link" close-position="bottom-right" width="280" close-on-click-modal></wd-curtain>
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const value = ref<boolean>(false)
|
||
|
|
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
|
||
|
|
const link = ref<string>('/pages/index/index')
|
||
|
|
|
||
|
|
function handleClick() {
|
||
|
|
value.value = true
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| Parameter | Description | Type | Options | Default | Version |
|
||
|
|
|---------------------|--------------------------------------------------------------|---------|---------------------------------------------------------------------------|---------|----------|
|
||
|
|
| value | Binding value, show/hide curtain (deprecated, use modelValue)| boolean | - | - | - |
|
||
|
|
| modelValue | Binding value, show/hide curtain | boolean | - | - | 1.7.0 |
|
||
|
|
| src | Curtain image URL, must use online URL | string | - | - | - |
|
||
|
|
| width | Curtain image width, default unit px | number | - | - | - |
|
||
|
|
| to | Curtain image click link | string | - | - | - |
|
||
|
|
| close-position | Close button position | string | inset / top / bottom / top-left / top-right / bottom-left / bottom-right | inset | - |
|
||
|
|
| close-on-click-modal| Close on mask click | boolean | - | false | - |
|
||
|
|
| hide-when-close | Hide popup layer when closed (display: none) | boolean | - | true | - |
|
||
|
|
| z-index | Set layer level | number | - | 10 | 1.4.0 |
|
||
|
|
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | 1.11.0 |
|
||
|
|
| show-menu-by-longpress | Enable long press image to show Mini Program code recognition menu, only supported in WeChat Mini Program | boolean | - | false | 1.13.0 |
|
||
|
|
| close-on-click | Whether clicking the image should close the curtain. Defaults to true. | boolean | - | ture | 1.13.0 |
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
| Event Name | Description | Parameters | Version |
|
||
|
|
|--------------|--------------------------------------------------------------------------------------------|------------|----------|
|
||
|
|
| click | Triggered when clicking the curtain | - | - |
|
||
|
|
| close | Triggered when popup layer closes | - | - |
|
||
|
|
| click-modal | Triggered when clicking the mask | - | - |
|
||
|
|
| beforeenter | Triggered before enter | - | - |
|
||
|
|
| enter | Triggered during enter | - | - |
|
||
|
|
| afterenter | Triggered after enter | - | - |
|
||
|
|
| beforeleave | Triggered before leave | - | - |
|
||
|
|
| leave | Triggered during leave | - | - |
|
||
|
|
| afterleave | Triggered after leave | - | - |
|
||
|
|
| load | Image load complete event | - | - |
|
||
|
|
| error | Image load failure event, if image fails to load, curtain component won't show even if `value` is true | - | - |
|
||
|
|
|
||
|
|
## Slots
|
||
|
|
|
||
|
|
| Name | Description | Version |
|
||
|
|
|-------|---------------------|----------|
|
||
|
|
| close | Close button slot | 1.5.0 |
|
||
|
|
|
||
|
|
## External Classes
|
||
|
|
|
||
|
|
| Class Name | Description | Version |
|
||
|
|
|-------------------|-----------------------|----------|
|
||
|
|
| custom-class | Root node style | - |
|
||
|
|
| custom-close-class| Close button style | 1.5.0 |
|
||
|
|
| custom-close-style| Close button style | 1.5.0 |
|