Skip to content

Curtain 幕帘

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

基本用法

通过 value 属性设置显示隐藏,监听 @close 事件修改 value,必填项。

src 为幕帘图片地址(只支持在线地址),值为 string 类型,必填项。

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

html
<wd-button @click="handleClick">展示幕帘</wd-button>
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose"></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
}

function handleClose() {
  value.value = false
}

设置幕帘图片宽高

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

html
<wd-button @click="handleClick">展示幕帘</wd-button>
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose" 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
}

function handleClose() {
  value.value = false
}

修改关闭按钮位置

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

html
<wd-button @click="handleClick">展示幕帘</wd-button>
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose" 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
}

function handleClose() {
  value.value = false
}

设置遮罩点击可关闭幕帘

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

html
<wd-button @click="handleClick">展示幕帘</wd-button>
<wd-curtain :value="value" :src="img " :to="link" close-position="bottom-right" width="280" @close="handleClose" 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
}

function handleClose() {
  value.value = false
}

Attributes

参数说明类型可选值默认值最低版本
value绑定值,展示/关闭幕帘boolean---
src幕帘图片地址,必须使用网络地址string---
width幕帘图片宽度,默认单位pxnumber---
to幕帘图片点击链接string---
close-position关闭按钮位置stringinset / top / bottom / top-left / top-right / bottom-left / bottom-rightinset-
close-on-click-modal点击遮罩是否关闭boolean-false-
hide-when-close是否当关闭时将弹出层隐藏(display: none)boolean-true-

Events

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

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.