7.6 图片预览（Lightbox）

图片列表全屏显示组件

• 常用于详情页面的图片放大显示，让用户清晰看到效果
• 需要设置图片的显示高度，也可以设置宽度（默认750px）
• 可以传入一组图片，滑动显示

实例

使用方法

<template>
  <div class="wrapper">
    <image
      class="demo-image"
      :src="imageList[0].src"
      @click="openLightbox"
      aria-label="点击打开全屏图片预览"
    ></image>
    <dof-lightbox
      :show="show"
      :width="750"
      :height="800"
      :index="0"
      :image-list="imageList"
      @dof-lightbox-overlay-clicked="closeLightbox"
    ></dof-lightbox>
  </div>
</template>

<script>
import { DofLightbox } from 'dolphin-intl-ui'

export default {
  components: { DofLightbox },
  data() {
    return {
      show: false,
      imageList: [
        { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg' },
        { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg' },
        { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg' },
      ],
    }
  },
  methods: {
    openLightbox() {
      this.show = true
    },
    closeLightbox() {
      this.show = false
    },
  },
}
</script>

<style scoped>
.wrapper {
  flex: 1;
}

.demo-image {
  width: 750px;
  height: 400px;
}
</style>

Attributes

Prop	Type	Required	Default	Description
show	Boolean	N	false	是否显示图片预览
width	Number | String	N	750	图片宽度
height	Number | String	N	750	图片高度
index	Number | String	N	0	初始展示的图片索引
image-list	Array	N	-	图片列表，列表项格式为 { src: '图片地址' }
indicator-color	Object	N	{ 'item-color': 'rgba(255, 195, 0, .5)', 'item-selected-color': '#ffc300', 'item-size': '20px' }	指示器颜色配置
interval	Number | String	N	3000	底层 Slider 的切换间隔，单位为毫秒；组件固定关闭自动播放
opacity	Number | String	N	0.6	遮罩层透明度
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
mask-bg-color	String	N	''	遮罩背景色

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

向内部遮罩透传暗黑开关，橙色指示器保留原色。

Events

事件名	说明	回调参数
dofLightboxOverlayClicked	底层 dof-mask 触发 dofMaskSetHidden 时转发；通常在回调中将 show 设为 false	{}