公司项目实现全屏功能，用到的地方很多，想到用vue指令实现
main.js
import popupManager from '@element-ui/lib/lib/utils/popup/popup-manager' Vue.prototype.gcommonPopupManager = popupManager
screenFull.js
import Vue from 'vue'
const executor = (el, binding) => {const { tagName } = elconst { id, className, fn, fullAside = true } = binding.valueconst fullClass = fullAside ? 'screen-full-in-aside' : 'screen-full-out-aside'let fullDoc = document.querySelector('#' + id) ?? document.querySelector('.' + className)el.style.cursor = 'pointer'if (tagName === 'I' || tagName === 'SPAN') {el.classList.add('el-icon-full-screen')el.addEventListener('click', e => {e.stopPropagation()Vue.prototype.gcommonPopupManager.zIndex = 2008fullDoc.classList.toggle(fullClass)let flag = fullDoc.classList.value.includes(fullClass)flag? el.classList.replace('el-icon-full-screen', 'el-icon-full-screen-exit'): el.classList.replace('el-icon-full-screen-exit', 'el-icon-full-screen')onmouseleave()fn && fn(flag)})// 鼠标移入时，将浮沉元素插入到body中el.onmouseenter = onmouseenter(fullDoc)// 鼠标移动时，动态修改浮沉的位置属性el.onmousemove = e => onmousemove(e)// 鼠标移出时将浮层元素销毁el.onmouseleave = onmouseleave} else if (tagName === 'BUTTON') {const fullScreen = `<i class="el-icon-full-screen" style="padding-right: 5px"></i>全屏`const fullScreenOut = `<i class="el-icon-full-screen-exit" style="padding-right: 5px"></i>退出全屏`el.innerHTML = fullScreenel.addEventListener('click', e => {e.stopPropagation()Vue.prototype.gcommonPopupManager.zIndex = 3000fullDoc.classList.toggle(fullClass)let flag = fullDoc.classList.value.includes(fullClass)el.innerHTML = flag ? fullScreenOut : fullScreenfn && fn(flag)})}
}
const onmouseenter = fullDoc => {return function () {// 创建浮层元素并设置样式const vcTooltipDom = document.createElement('div')vcTooltipDom.style.cssText = `overflow: auto;position:fixed;border-radius:5px;display:inline-block;font-size: 12px;z-index:2501;background: rgba(0,13,31,.85);color: #fff;padding: 2px 10px;line-height: 20px;box-shadow: 0 12px 32px 0 rgb(0 13 31 / 10%);`// 设置id方便寻找vcTooltipDom.setAttribute('id', 'vc-tooltip')// 将浮层插入到body中document.body.appendChild(vcTooltipDom)// 浮层中的文字 通过属性值传递动态的显示文案let flag = fullDoc.classList.value.includes('screen-full')document.getElementById('vc-tooltip').innerHTML = flag ? '退出全屏' : '全屏'}
}
const onmousemove = e => {window.requestAnimationFrame(() => {const vcTooltipDom = document.querySelector('#vc-tooltip')if (!vcTooltipDom) returnvcTooltipDom.style.top = e.clientY - 35 + 'px'vcTooltipDom.style.left = e.clientX - 15 + 'px'})
}
const onmouseleave = () => {// 找到浮层元素并移出const vcTooltipDom = document.getElementById('vc-tooltip')vcTooltipDom && document.body.removeChild(vcTooltipDom)
}
const screenfull = {inserted: (el, binding) => executor(el, binding)
}
export default {install(Vue) {Vue.directive('screenfull', screenfull)}
}
css 部分 （肯不满足各位要求，自己去设置样式）
.screen-full-in-aside {position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding: 0.5em 1em;background-color: #ffffff;z-index: 2005;
}
.screen-full-out-aside {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0.5em 1em;background-color: #ffffff;z-index: 2000;
}
示例：
按钮全屏：
<el-buttonv-screenfull="{className: 'flow-alter-draft',fn: setTableHeight}"
></el-button>
图标全屏：
<i v-screenfull="{ className: 'flow-alter-draft', fn: setTableHeight }" ></i>
<span v-screenfull="{ className: 'flow-alter-draft', fn: setTableHeight }" ></span>
参数：
id&&className 必填（二选一）
fn： 全屏后的回调函数，返回参数为true/false
fullAside： 是否全屏（遮挡左侧菜单） true/false
