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

Curtain 幕帘

一般用于公告类的图片弹窗。

基本用法

通过 v-model 属性设置显示隐藏，必填项。

src 为幕帘图片地址（只支持在线地址），值为 string 类型，必填项。

to 为幕帘点击访问链接，值为 string 类型，非必填项。

<wd-button @click="handleClick">展示幕帘</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
}

设置幕帘图片宽高

设置 width，默认高度为图片原始比例与传入width计算所得, 必填项。

<wd-button @click="handleClick">展示幕帘</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
}

修改关闭按钮位置

设置 close-position，默认为 'inset'，可选值 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'。

<wd-button @click="handleClick">展示幕帘</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
}

设置遮罩点击可关闭幕帘

设置 close-on-click-modal 属性，值为boolean 类型，非必填项。

<wd-button @click="handleClick">展示幕帘</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

参数	说明	类型	可选值	默认值	最低版本
value	绑定值，展示/关闭幕帘（已废弃，请使用 modelValue）	boolean	-	-	-
modelValue	绑定值，展示/关闭幕帘	boolean	-	-	1.7.0
src	幕帘图片地址，必须使用网络地址	string	-	-	-
width	幕帘图片宽度，默认单位 px	number	-	-	-
to	幕帘图片点击链接	string	-	-	-
close-position	关闭按钮位置	string	inset / top / bottom / top-left / top-right / bottom-left / bottom-right	inset	-
close-on-click-modal	点击遮罩是否关闭	boolean	-	false	-
hide-when-close	是否当关闭时将弹出层隐藏（display: none）	boolean	-	true	-
z-index	设置层级	number	-	10	1.4.0
root-portal	是否从页面中脱离出来，用于解决各种 fixed 失效问题	boolean	-	false	1.11.0
show-menu-by-longpress	开启长按图片显示识别小程序码菜单，仅微信小程序支持	boolean	-	false	1.13.0
close-on-click	是否在点击图片时关闭幕帘，默认为 true	boolean	-	ture	1.13.0

Events

事件名称	说明	参数	最低版本
click	点击幕帘时触发	-	-
close	弹出层关闭时触发	-	-
click-modal	点击遮罩时触发	-	-
beforeenter	进入前触发	-	-
enter	进入时触发	-	-
afterenter	进入后触发	-	-
beforeleave	离开前触发	-	-
leave	离开时触发	-	-
afterleave	离开后触发	-	-
load	图片加载完成事件	-	-
error	图片加载失败事件，若图片加载失败，则不会展示幕帘组件，即使设置 value 为 true	-	-

Slots

name	说明	最低版本
close	关闭按钮插槽	1.5.0

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-
custom-close-class	关闭按钮样式类	1.5.0
custom-close-style	关闭按钮样式	1.5.0