首先新建一個(gè)Preview的組件
<template>
<el-image-viewer
class="preview-img-component"
v-if="showPreview"
:urlList="previewImages"
:on-close="closeViewer"
></el-image-viewer>
</template>
<script>
// 可自行去對(duì)應(yīng)目錄查看該組件
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 = {}
// 注冊(cè)
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 需要預(yù)覽的圖片數(shù)組
*/
Vue.prototype.$preview = function (imgs = []) {
instance.showPreview = true
instance.previewImages = imgs
}
}
export default Preview
然后在main.js中引入使用
import Preview from './utils/preview'
Vue.use(Preview)
關(guān)于調(diào)用
this.$preview([圖片1,圖片2])
