el-image实现全屏预览以及修改底部操作按钮

系统自带：

改造后：

需求：修改底部缩放比例按钮为全屏功能，修改旋转按钮功能为切换上一张/下一张图片。

改造思路：

1.参考官方组件源码，需要调用点击事件。官方代码库UNPKG - element-ui

2.调用键盘F11键实现图片全屏预览。

3.监听键盘左右键实现切换上一张/下一张图片。

4.切换图片时候需要判断当前是否全屏状态。

废话少说，开干~

<template>
	<div>
		<el-image ref="elImage" style="width: 0; height: 0;" 
			:preview-src-list="logicImageList">
		</el-image>
		
		<el-button @click="PreviewImg">预览图片</el-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				logicImageList: [], //图片列表，格式为['xxxx.png','xxx.png']
				full: false, //是否全屏
			}
		},
		methods: {
			PreviewImg() {
				this.$nextTick(() => {
					this.$refs.elImage.clickHandler() //触发el-image组件
					setTimeout(() => {
						let that = this
						let inner = document.querySelector('.el-image-viewer__actions__inner'); //底部操作栏div
						let close = document.querySelector('.el-image-viewer__close'); //蒙层关闭按钮
						let next = document.querySelector('.el-image-viewer__next'); //下一页
						let prev = document.querySelector('.el-image-viewer__prev'); //上一页

						// 获取要删除的 li 元素
						var screen = document.querySelector(".el-icon-full-screen");
						var liElement = document.querySelector(".el-icon-refresh-left");
						var riElement = document.querySelector(".el-icon-refresh-right");
						var divider = document.querySelectorAll('.el-image-viewer__actions__divider')
						// 获取 li 元素的父节点 ul
						var parentNode = liElement.parentNode;
						// 从父节点中移除 li 元素
						for (var i = 0; i < divider.length; i++) {
							divider[i].parentNode.removeChild(divider[i]);
						}
						// 删除缩放按钮,删除两个旋转按钮
						parentNode.removeChild(screen);
						parentNode.removeChild(riElement);
						parentNode.removeChild(liElement);

						// 创建全屏按钮,切换上一张/下一张按钮
						let e = document.createElement('i')
						let f = document.createElement('i')
						let g = document.createElement('i')
						e.innerHTML = `<i class="el-icon-full-screen"></i>`
						f.innerHTML = `<i class="el-icon-arrow-left"></i>`
						g.innerHTML = `<i class="el-icon-arrow-right"></i>`
						f.onclick = function pre() { //上一张
							that.$refs.elImage.$children[0].prev()
							setTimeout(() => {
								that.utilStyle()
							}, 50)
						}
						g.onclick = function next() { //下一张
							that.$refs.elImage.$children[0].next()
							setTimeout(() => {
								that.utilStyle()
							}, 50)
						}
						// 全屏操作
						e.onclick = function fullScreen() {
							var screen = document.querySelector(".el-icon-full-screen");
							var menu = document.querySelector(".el-icon-menu");
							var canvas = document.querySelector(".el-image-viewer__canvas")
							let allImg = canvas.getElementsByTagName('img')
							if (!that.full) {
								that.full = true
								allImg[0].style.width = '100%'
								allImg[0].style.height = '100%'
								screen.classList.replace("el-icon-full-screen", "el-icon-menu");
								document.documentElement
							.requestFullscreen(); //Chrome、Firefox、IE 11+和Edge浏览器
								document.documentElement
							.webkitRequestFullscreen(); //Safari和Chrome 49之前版本
								document.documentElement.mozRequestFullScreen(); //Firefox
								document.documentElement.msRequestFullscreen(); //IE 11
							} else {
								allImg[0].style.width = ''
								allImg[0].style.height = ''
								allImg[0].style.maxWidth = '100%'
								allImg[0].style.maxHeight = '100%'
								menu.classList.replace("el-icon-menu", "el-icon-full-screen");
								that.full = false
								document.exitFullscreen(); // 如果当前处于全屏状态则会退出全屏
							}
						}
						close.addEventListener("click", function() {
							document.exitFullscreen(); // 如果当前处于全屏状态则会退出全屏
							that.full = false
						});
						next.addEventListener("click", function() {
							that.utilStyle()
						});
						prev.addEventListener("click", function() {
							that.utilStyle()
						});
						// 监听键盘按下左右键
						document.onkeydown = function showkey() {
							var key = event.keyCode;
							switch (key) {
								case 37:
									setTimeout(() => {
										that.utilStyle()
									}, 50)
									break;
								case 39:
									setTimeout(() => {
										that.utilStyle()
									}, 50)
									break;
							}
						};
						inner.appendChild(e);
						inner.appendChild(f);
						inner.appendChild(g);
					}, 50)
				})
			},
			// 判断是否全屏显示
			utilStyle() {
				let menu = document.querySelector('.el-icon-menu');
				if (menu) {
					var canvas = document.querySelector(".el-image-viewer__canvas")
					let allImg = canvas.getElementsByTagName('img')
					allImg[0].style.width = '100%'
					allImg[0].style.height = '100%'
				}
			}
		}

	}
</script>