Lightbox 灯箱

示例

在 GitHub 上编辑此页编辑
<template>
<article>
  <div>
    <veui-check-box
      v-model="wrap"
    >
      循环播放
    </veui-check-box>
    <veui-check-box
      v-model="indicator"
      true-value="number"
      false-value="none"
    >
      头部页码
    </veui-check-box>
  </div>
  <veui-button
    class="mt-3p"
    ui="primary"
    @click="open = true"
  >
    展现灯箱
  </veui-button>
  <veui-lightbox
    :open.sync="open"
    :datasource="items"
    :wrap="wrap"
    :indicator="indicator"
  />
</article>
</template>

<script>
import { Lightbox, Checkbox, Button } from 'veui'

export default {
  components: {
    'veui-lightbox': Lightbox,
    'veui-check-box': Checkbox,
    'veui-button': Button
  },
  data () {
    return {
      wrap: false,
      indicator: 'number',
      open: false
    }
  },
  computed: {
    items () {
      return [
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
          alt: 'A cute kitty looking at you with its greenish eyes.',
          desc: 'Cat'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
          alt: 'A common kingfisher flying above river.',
          desc: 'Kingfisher'
        },
        {
          src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
          alt: 'flower video',
          desc: '花',
          type: 'video'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
          alt: 'A white and gray dolphin in blue water.',
          desc: 'Dolphin'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-checkbox {
  margin-right: 15px;
}

.mt-3p {
  margin-top: 12px;
}
</style>

API

属性

名称类型默认值描述
uistring=-预设样式。veui-theme-dls 未提供,可自定义。
openbooleanfalse

.sync

是否显示浮层。

datasourceArray<Object>[]

灯箱数据源,项目类型为:{ src, alt, type, desc }

名称类型描述
srcstring媒体源地址。
typestring=默认图片类型,video 表示视频。
altstring=图片的降级描述文本。
descstring=该项目的描述文本。
indexnumber=0

.sync

当前播放序号。

wrapboolean=false是否可以循环播放。
closableboolean=true是否显示关闭按钮。
escapableboolean=true按下 esc 键是否可以关闭浮层。仅在 closabletrue 时生效。
prioritynumber=-浮层层叠权重,参考 Overlay 组件的 priority 属性。
before-closefunction(string): boolean=|Promise<boolean=>-

在将触发浮层关闭的操作发生后执行,类型为 function(type: string): boolean=|Promise<boolean=>type 为触发关闭的类型,默认情况下可选值为 'ok'|'cancel'。返回值可以是一个 boolean,也可以是一个 resolve booleanPromise,用来处理可能需要异步决定浮层关闭状态的情况。返回值或 resolve 值非 false 时才会关闭浮层。

<veui-lightbox :open.sync="dialogOpen" :before-close="submit">...</veui-lightbox>
overlay-classstring | Array | Object=-浮层根元素类名,参考 Overlay 组件的 overlay-class 属性。
indicatorstring='number'

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

描述
number显示「当前页数/全部页数」文字提示。
none不显示指示器。
optionsObject={ video: { muted: true, autoplay: true, controls: true } }额外配置。

插槽

名称描述
item

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

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

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

desc

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

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

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

事件

名称描述
cancel灯箱关闭后触发。

图标

名称描述
close关闭。
prev上一页。
next下一页。
在 GitHub 上编辑此页编辑