一、造成无法全屏显示的原因
- 层级问题
- 父组件使用transform
- 待补充。。。
二、解决方案
通过万能的度娘发现，饿了么组件库的el-image组件中存在el-image-viewer组件，该组件为el-image点击后的预览组件，我们可以采用全局body挂载该组件，实现图片全屏预览，但该组件在文档中没有展示
2.1 封装预览组件
<!-- 全局图片预览组件 -->
<template>
<el-image-viewer :url-list="urlList" :on-close="onClose" :z-index="zIndex" />
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
data() {
return {};
},
methods: {
// 关闭预览回调
onClose() {
this.$emit("handleShowViewer");
}
},
props: {
// 预览的图片
urlList: {
type: Array,
default: () => []
},
zIndex: {
type: Number,
default: 9999
}
},
components: {
ElImageViewer
}
};
</script>
2.2 封装全局body挂载方法
import Vue from "vue";
// 图片预览组件
import ImageView from "@/components/imageViewer";
/**
*
* @param {组件} Component 要挂载到body的组件
* @param {Object} props props 对象
* @returns
*/
export function create(Component, props) {
// 借鸡生蛋new Vue({render() {}}),在render中把Component作为根组件
const vm = new Vue({
// h是createElement函数，它可以返回虚拟dom
render(h) {
// 将Component作为根组件渲染出来
// h(标签名称或组件配置对象，传递属性、事件等，孩子元素)
return h(Component, {
props,
on: {
handleShowViewer: function () {
handleRemove();
}
}
});
}
}).$mount(); // 挂载是为了把虚拟dom变成真实dom
// 不挂载就没有真实dom
// 手动追加至body
// 挂载之后$el可以访问到真实dom
document.body.appendChild(vm.$el);
// 实例
const comp = vm.$children[0];
// 移除dom
function handleRemove() {
// 删除dom
document.body.removeChild(vm.$el);
// 销毁组件
vm.$destroy();
}
// 淘汰机制
comp.remove = () => {
handleRemove();
};
// 返回Component组件实例
return comp;
}
/**
* @description 全局图片预览
* @param {Array} urlList 图片地址数组
*/
export function createImageViewer(urlList) {
create(ImageView, { urlList });
}
2.3 组件中使用
// 引入
import { createImageViewer } from "@/utils/image-viewer.js";
// 调用
const urlList = ['https://img2.baidu.com/it/u=2075952081,396337011&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678467600&t=326667df37d896bfd6f5358fa4eb0b53']
// 使用
createImageViewer(urlList);
2.4 预览组件参数
<el-image-viewer
v-if="showViewer"
:on-close="onClose"
:on-switch="onSwitch"
:url-list="urlList"
/>
参数 说明 类型 可选值 默认值
initialIndex 默认显示的第一张预览图(urlList的下标值) Number 0
urlList 预览图的地址列表 Array
zIndex 设置图片预览的 z-index Number 2000
onClose 关闭图片预览时的回调函数 Function
onSwitch 切换上一张下一张图片时的回调函数 Function (默认参数index 返回图片所在下标)
三、效果
3.1 el-dialog组件中嵌套el-image
3.2 使用
3.2 el-dialog效果
3.3 预览效果
3.4 未使用预览组件时的效果
参考：
