aidol-image
A image Component for vue
Installation
$ npm i @aidol/image --save
Usage
<!-- demo.vue -->
<template>
<div>
<ai-image :src="url" :preview-src-list="srcList" viewer-tips="hello aidol image" @switch="handleSwitch" />
</div>
</template>
import AiImage from '@aidol/image'
export default {
components: {
AiImage
},
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
},
methods: {
handleSwitch(index, viewer) {
console.log(index) // 当前预览图索引
console.log(viewer) // 大图预览组件实例
}
}
}
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
src |
图片源,同原生 |
string |
- |
- |
fit |
确定图片如何适应容器框,同原生 object-fit |
string |
fill / contain / cover / none / scale-down |
- |
alt |
原生 alt |
string |
- |
- |
referrer-policy |
原生 referrerPolicy |
string |
- |
- |
lazy |
是否开启懒加载 |
boolean |
- |
false |
scroll-container |
开启懒加载后,监听 scroll 事件的容器 |
string / HTMLElement |
- |
最近一个 overflow 值为 auto 或 scroll 的父元素 |
z-index |
设置图片预览的 z-index |
Number |
- |
2000 |
viewer-tips |
为当前大图预览提供的提示文本内容,如果提供了,则会显示在预览弹出层的上方,默认文本居中。如果是 string 类型,则每张预览大图显示同样的提示文本,如果是 function 类型,则该函数会被依次传入 index 当前预览大图索引值,viewer 大图预览组件实例。 |
string / function |
- |
undefined |
viewer-tips-class-name |
为 viewer-tips 元素添加类名 |
string |
- |
ai-image-viewer__tips |
viewer-tips-style |
为 viewer-tips 元素添加样式 |
object |
- |
见下方注释 |
viewer-tips-style默认值:
{
height: '40px',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '14px',
color: '#fff',
position: 'absolute',
left: '0px',
top: '0px'
}
Events
事件名称 |
说明 |
回调参数 |
load |
图片加载成功触发 |
(e: Event) |
error |
图片加载失败触发 |
(e: Event) |
switch |
预览图切换时触发,首次点开预览图时也会触发。index 当前预览图索引值,viewer 大图预览弹出层组件实例。 |
(index: number, viewer: VNode) |
Slots
名称 |
说明 |
placeholder |
图片未加载的占位内容 |
error |
加载失败的内容 |
Logs