@lateinos/awesome-ui

# ImagePreview 图片预览

# 引入

WARNING

调用方法后会立刻呈现

import { H3ImagePreview } from '@lateinos/awesome-ui';

// 全局引用

// 直接调用
H3ImagePreview({});

// 在vue组件中调用 (推荐)
Vue.use(H3ImagePreview);

export default {
  methods: {
    preview () {
      this.$imagePreview({});
    },
  },
};

# Params

参数 说明 类型 可选值 默认值
images 要显示的图片数组 array — —
initialViewIndex 显示图片组的第 initialViewIndex + 1 张 number — 0
downloadable 是否允许下载 boolean — true
zoomable 是否允许缩放 boolean — true
rotatable 是否允许旋转 boolean — true
scalable 是否允许镜像翻转 boolean — true
defaultAlt 若images 子配置项name无值时显示 string — '暂无名称'
handleDownload 自定义下载方法，参数为images项 (默认下载方法需要图片地址为同源) function — null
lazyLoad 是否懒加载图片, 若是则navbar强制不显示 boolean — false
navbar 是否显示缩略图，0(flase)为不显示，1(true)显示缩略图，2为显示小点点，若是图片超过10张将强制显示缩略图 boolean|number 0 | 1 | 2 false
show 显示前回调函数 function — null
shown 显示后回调函数 function — null
hide 隐藏前回调函数 function — null
hidden 隐藏后回调 function — null
view 切换时回调函数 function — null
viewed 切换后回调函数 function — null
  • images 子配置项
参数 说明 类型 可选值 默认值
name 图片名称 string — ''
source 图片地址，必填 string — ''
downloadUrl 图片下载地址，缺省时为 source 值 string — ''

← GridLayout 栅格拖拽 →