上代码:
import Vue from 'vue'
export default async function(urlList: string[], index = 0) {
const ImageViewer = await import('element-ui/packages/image/src/image-viewer.vue')
/** 创建响应式数据 */
const data = Vue.observable({
index,
hide: false,
})
/** 创建虚拟节点 */
const vm = new Vue({
// 这里用的h 写法(看不懂可以去了解一下 vue render 的createdElement),也可以使用jsx,或者动态引入vue组件
render: h =>
h(
'div',
{
class: ['ImageViewerBox', style['ImageViewerBox'], { [style['ImageViewerBoxLeave']]: data.hide }],
},
[
h(ImageViewer.default, {
props: { urlList, initialIndex: data.index, onClose, onSwitch, zIndex: 9999 },
ref: 'ImageViewer',
style: {
bottom: `${urlList?.length > 1 ? 105 : 0}px`,
},
}),
h(
'ul',
{
class: [style['contraction-box']],
style: {
'animation-direction': data.hide ? 'reverse' : 'normal',
},
},
[
urlList?.length > 1 &&
urlList.map((i, index) =>
h(
'li',
{
key: index,
class: [style['li'], { [style['li-show']]: index === data.index }],
on: {
click: () => upIndex(index),
},
},
[
h('img', {
class: style['img'],
attrs: {
src: i,
},
}),
],
),
),
],
),
],
),
}).$mount()
/** 挂载实例 */
document.querySelector('body')?.appendChild?.(vm.$el)
/** 销毁组件 */
function onClose() {
setTimeout(() => {
vm.$destroy()
document.querySelector('body')?.removeChild(vm.$el)
}, 280)
data.hide = true
}
/** 监听组件index值变化 */
function onSwitch(index) {
data.index = index
}
/** 更新组件index */
function upIndex(index) {
;(vm.$refs.ImageViewer as Vue).$data.index = index
}
}
/**
* 使用方法:
* $ImageViewer([url],index)
* url 图片链接(以数组形式传入,单个[url],多个[url1,url2,url3])
* index 用于传入多个url时,初始显示图片的下标,不传默认0
*/