指定div元素铺满全屏幕,全屏/还原,详细代码

灵儿姑娘

已于 2024-01-13 17:19:48 修改

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端

于 2023-10-13 14:26:06 首次发布

本文链接：https://blog.csdn.net/weixin_37835649/article/details/133808520

版权

****注意:只有vue工程可用

指定某个div全屏, 实现一个铺满全屏的div

vue自定义指令方式,,默认在绑定的div最右侧显示

Attributes / Events	说明	默认值/回调参数
el	手动绑定节点	当前指令坐在的div
style	调整icon位置或样式	—
activeClass/restClass	全屏与还原是,节点插入对应class	show-max/show-min
callBack	全屏与还原时候的回调函数	{el,visible}

Attributes / Events的使用示例:

<!--示例  所有属性/事件可自行搭配使用 -->
<template>
  <div class="">
    <!--1.基础用法,默认会在当前绑定的dom元素最右侧出现,最大化窗口icon,如上图 -->
    <div v-maxWindow>
      <p>我是个一盒子可以全屏</p>
    </div>
    <!--2.属性el的用法, 应用场景:特殊需求, 想在当前页面,引用的组件中的一个内部节点,实现全屏效果 -->
    <div v-maxWindow="{ el: '.h-card-header' }">
      <!--.h-card-header 为el-card组件内的一个头不class  -->
      <h-card></h-card>
    </div>
    <!--3.属性style的用法,可手动调整icon的样式,包括距离绑定的dom距离等,多个用;分割,符合css规范即可 -->
    <div v-maxWindow="{ style: 'padding:20px;width:60px' }">
      <p>我是个一盒子可以全屏</p>
    </div>

    <!--4.属性activeClass,restClass 全屏时与还原时绑定的class, 应用场景,全屏与还原时候的添加动画,可配合Animate.css使用,或者自定义动画等 -->
    <div
      v-maxWindow="{
        restClass: 'animate__fadeOutBottomLeft',
        activeClass: 'animate__fadeInBottomLeft',
      }"
    >
      <!-- animate__fadeOutBottomLeft和 animate__fadeInBottomLeft为Animate.css中  -->

      <p>我是个一盒子可以全屏</p>
    </div>

    <!--5.属性callBack,点击全屏与还原时候的回调函数 -->
    <div
      v-maxWindow="{
        callBack: ({ el, visible }) => {
          //el为当前绑定的节点实例
          //visible:true|false    true代表全屏  false代表还原
        },
      }"
    >
      <p>我是个一盒子可以全屏</p>
    </div>
  </div>
</template>

快速上手

//使用
  <div v-maxWindow >
      <p>我是个一盒子可以全屏</p>
  </div>

//注册自定义指令 
//src下,入口文件main.js  

import "./zoomMax.js";//引入下方文件

.......

//zoomMax.js

/**
 * @author bing
 *  在需要放大窗口的div上 使用此指令 v-maxWindow,默认会在当前盒子最右侧出现
 * 基础用法   <div v-maxWindow ></div>
 * @since 2023-10-13 09:15:14
 * @param {string} el 支持绑定指定的calss或者id,  demo: <div v-maxWindow="{el:"#app"}"> </div>
 * @param {string} style   调整icon位置或样式,  demo:  <div v-maxWindow="{style:'right:0;padding:20px'}"> </div>
 * @param {string} activeClass  全屏时,在当前div追加 class 方便最大化的时候追加动画等其他操作
 * @param {string} restClass 还原时,追加div class 方便还原时,追加动画等其他操作
 * @param {function} callBack  打开与关闭的回调函数 (e)=>{},e: 1为打开 0为还原,demo: <div   v-maxWindow="{callBack:(e)=>{}}"> </div>
 *
 */
//maxWindow.js
// * @param {string} className   icon添加 class  demo:  <div v-maxWindow="{style:'right:0;padding:20px'}"> </div>
import Vue from "vue";
// 图标基础信息
const domList = [
  {
    dom: `<svg t="1696992086182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1588" width="24" height="24"><path d="M752 271H515a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8h285c17.673 0 32 14.327 32 32v285a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8V271zM273 751h237a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H225c-17.673 0-32-14.327-32-32V514a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v237z" fill="#323338" p-id="1589"></path></svg>`,
    tit: "最大化",
    id: "scale-max",
    hidden: false, //默认显示最大化
  },
  {
    dom: `<svg t="1696992546139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4848" width="24" height="24"><path d="M412.3 544.8c36 0 65.5 27.3 69.1 62.3l0.4 7.1v291c0 10.3-8.4 18.7-18.7 18.7h-46c-10.3 0-18.7-8.4-18.7-18.7V628H120.3c-10.3 0-18.7-8.3-18.7-18.6v-46c0-10.3 8.4-18.7 18.7-18.7h292v0.1zM622.6 121.8V398h281.1c10.3 0 18.7 8.4 18.7 18.7v46c0 10.3-8.4 18.7-18.7 18.7h-295c-36 0-65.5-27.3-69.1-62.3l-0.4-7.1V121.8c0-10.3 8.4-18.7 18.7-18.7h46c10.4 0 18.7 8.4 18.7 18.7z" p-id="4849"></path></svg>`,
    tit: "还原",
    id: "scale-min",
    hidden: true,
  },
];

/**@ bing
 *2023-07-10 15:27:58
 * v-maxWindow: div模块 最大化最小化
 */
Vue.directive("maxWindow", {
  //属性名称maxWindow，前面加v- 使用
  bind(dom, binding, vnode, oldVnode) {
    // 定时等待dom加载完成
    setTimeout(() => {
      let {
        el = "",
        style = "",
        className = "",
        callBack,
        activeClass = "show-max",
        restClass = "show-min",
      } = binding?.value ?? {};
      let insertRule = null;
      // 获取页面样式列, 样式插入
      let sheet = document.styleSheets[0];
      let wDom = null;
      // 如果没有el直接吧当前指令模块所在的div放大
      if (!el) {
        // dom.style.float = "right";
        wDom = dom;
      } else {
        wDom = document.querySelector(el);
      }

      wDom.style.position = "relative";
      let cerateDiv = document.createElement("div");
      // cerateDiv.style.position = "absolute";
      // cerateDiv.style

      domList.map((item) => {
        // 创建一个div 包裹放大缩小图标
        let div = document.createElement("div");
        div.className = "div-scale";
        div.id = item.id;
        // div.style.position = "relative";
        div.hidden = item.hidden;
        div.innerHTML = `<p title="${item.tit}" style="width:30px; top:10px;right:10px; cursor: pointer;position:absolute;z-index:998;${style}" >${item.dom}</p>`;
        cerateDiv.prepend(div);
        insertRule = sheet.insertRule(
          ".max-window{width: 100vw!important; height: 100vh !important;margin:0;position:fixed!important;top:0;left:0;z-index:999;background:white}",
          0
        );
        div.onclick = () => {
          // 全部显示
          cerateDiv.firstChild.hidden = false;
          cerateDiv.lastChild.hidden = false;
          // 隐藏另一个dom
          div.hidden = true;

          if (item.id == "scale-max") {
            wDom.classList.add("max-window"); //与最大化展示相关的class
            // 窗口还原的时候删除最小化class,追加最大化class
            wDom.classList.remove(restClass);
            wDom.classList.add(activeClass);

            callBack ? callBack(1) : ""; //打开与还原的回调函数
          } else {
            // 窗口还原的时候删除最大化class,追加最小化class
            wDom.classList.remove(activeClass);
            wDom.classList.add(restClass);

            wDom.classList.remove("max-window");
            callBack ? callBack(0) : ""; //打开与还原的回调函数
          }
        };
      });
      wDom.prepend(cerateDiv);
    }, 0);
  },
});