shop-wx/doc/wot-design-uni/docs/en-US/component/curtain.md

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.

<wd-button @click="handleClick">Show Curtain</wd-button>
<wd-curtain v-model="value" :src="img" :to="link"></wd-curtain>

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.

<wd-button @click="handleClick">Show Curtain</wd-button>
<wd-curtain v-model="value" :src="img" :to="link" width="280"></wd-curtain>

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'.

<wd-button @click="handleClick">Show Curtain</wd-button>
<wd-curtain v-model="value" :src="img" :to="link" close-position="top" width="280"></wd-curtain>

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.

<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>

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