docs_vue2/one/docs/components/lightbox.md

Lightbox 灯箱

示例

API

属性

名称	类型	默认值	描述
ui	string=	-	预设样式。veui-theme-dls 未提供，可自定义。
open	boolean	false	[^open]
datasource	Array<Object>	[]	[^datasource]
index	number=	0	[^index]
wrap	boolean=	false	是否可以循环播放。
closable	boolean=	true	是否显示关闭按钮。
escapable	boolean=	true	按下 esc 键是否可以关闭浮层。仅在 closable 为 true 时生效。
outside-closable	boolean=	false	点击内容区域外部时是否关闭对话框。
priority	number=	-	浮层层叠权重，参考 Overlay 组件的 priority 属性。
before-close	`function(string): boolean=	Promise<boolean=>`	-
overlay-class	`string	Array	Object=`
indicator	string=	'number'	[^indicator]
options	Object=	{ video: { muted: true, autoplay: true, controls: true } }	额外配置。
lazy	`boolean=	{ preload: number }`	false

^^^open :::badges .sync :::

是否显示浮层。 ^^^

^^^datasource 灯箱数据源，项目类型为：{ src, alt, type, desc }。

+++字段详情

名称	类型	描述
src	string	媒体源地址。
type	string=	默认图片类型，video 表示视频。
alt	string=	图片的降级描述文本。
desc	string=	该项目的描述文本。
+++
^^^

^^^index :::badges .sync :::

当前播放序号。 ^^^

^^^indicator 播放进度指示器的显示模式。

+++枚举值

值	描述
number	显示「当前页数/全部页数」文字提示。
none	不显示指示器。
^^^

^^^before-close 在将触发浮层关闭的操作发生后执行，类型为 function(): boolean=|Promise<boolean=>。返回值可以是一个 boolean，也可以是一个 resolve boolean 的 Promise，用来处理可能需要异步决定浮层关闭状态的情况。返回值或 resolve 值非 false 时才会关闭浮层。

+++调用示例

<veui-lightbox :open.sync="dialogOpen" :before-close="submit">...</veui-lightbox>

^^^

^^^lazy 指定是否懒加载轮播资源。

+++详情

名称	描述
false	不懒加载资源。
true	预加载当前展示项目的前后 1 个资源。
{ preload: number }	预加载当前展示项目的前后指定数量个资源。
+++
^^^

插槽

名称	描述
item	[^slot-item]
desc	[^slot-desc]

^^^slot-item 可用来定制每个灯箱项的媒体展示区域。

默认内容：每项图片或视频。

作用域参数为 datasource 属性每个列表项的内容（可以有自定义字段）加上 index: number 表示轮播项的序号。即整个 slot-scope 绑定的值为 {src, alt, type, desc, index, ...}。 ^^^

^^^slot-desc 可用来定制每个灯箱项的描述区域。

默认内容：每项描述文字。

作用域参数为 datasource 属性每个列表项的内容（可以有自定义字段）加上 index: number 表示轮播项的序号。即整个 slot-scope 绑定的值为 {src, alt, type, desc, index, ...}。 ^^^

事件

名称	描述
close	进行触发关闭操作的动作时触发。

图标

名称	描述
close	关闭。
prev	上一页。
next	下一页。