首先新建一个Preview的组件
<template>
<el-image-viewer
class="preview-img-component"
v-if="showPreview"
:urlList="previewImages"
:on-close="closeViewer"
></el-image-viewer>
</template>
<script>
// 可自行去对应目录查看该组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
data() {
return {
showPreview: false,
previewImages: [],
}
},
components: {
ElImageViewer,
},
methods: {
closeViewer() {
this.showPreview = false
},
},
}
</script>
<style lang="scss" scoped>
.preview-img-component {
z-index: 10000 !important;
::v-deep .el-icon-circle-close {
color: #ffffff;
font-weight: bold;
box-shadow: 0 2px 6px rgba(#000, 0.5);
}
}
</style>
然后在utils下新建preview.js
import PreviewItem from '../components/Preview.vue'
const Preview = {}
// 注册
Preview.install = function (Vue) {
const PreviewConstructor = Vue.extend(PreviewItem)
const instance = new PreviewConstructor()
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
/**
* 挂载在vue原型上
* @param {Array} imgs 需要预览的图片数组
*/
Vue.prototype.$preview = function (imgs = []) {
instance.showPreview = true
instance.previewImages = imgs
}
}
export default Preview
然后在main.js中引入使用
import Preview from './utils/preview'
Vue.use(Preview)
关于调用
this.$preview([图片1,图片2])
