全屏展示逻辑代码+ESC键盘事件

全屏展示逻辑代码

全屏 API - Web API 接口参考 | MDN

developer.mozilla.org/zh-CN/docs/…

// vue项目 template

<div @click="handleFullScreen">全屏事件</div> 
<div id="embedContainer"></div>

// vue项目 script

// data
fullscreen:false 

// mounted   
mounted() { 
  this.onresizeKeyupEsc();   
}, 

// methods 

// 全屏事件
handleFullScreen() {
  let element = document.getElementById("embedContainer");
  // 判断是否已经是全屏
  if (this.fullscreen) {
    // 否则，进入全屏
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
    console.log("已全屏！");
  } else {
    // 如果是全屏，退出
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    console.log("已还原！");
  }
  this.fullscreen = !this.fullscreen
},
//这是判断全屏状态的
fullscreenElement() {
  let fullscreenEle =
  document.fullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement;
  return fullscreenEle;
},
// 键盘esc事件
onresizeKeyupEsc() {
  let that = this;
  window.onresize = function () {
    setTimeout(() => {
      if (!that.fullscreenElement()) {
        that.fullscreen = false;
      }
    });
  };
}

指令 vue3

v-waterMarker 添加水印

 <div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>

/*
  需求：给整个页面添加背景水印。

  思路：
    1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
    2、将其设置为背景图片，从而实现页面或组件水印效果
  
  使用：设置水印文案，颜色，字体大小即可
  <div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
*/

import type { Directive, DirectiveBinding } from "vue";
const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
    // 水印文字，父元素，字体，文字颜色
    let can: HTMLCanvasElement = document.createElement("canvas");
    parentNode.appendChild(can);
    can.width = 205;
    can.height = 140;
    can.style.display = "none";
    let cans = can.getContext("2d") as CanvasRenderingContext2D;
    cans.rotate((-20 * Math.PI) / 180);
    cans.font = font || "16px Microsoft JhengHei";
    cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
    cans.textAlign = "left";
    cans.textBaseline = "Middle" as CanvasTextBaseline;
    cans.fillText(str, can.width / 10, can.height / 2);
    parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
};

const waterMarker = {
    mounted(el: DirectiveBinding, binding: DirectiveBinding) {
            addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
    }
};

export default waterMarker;

v-copy 复制

 <a-button v-copy="data">复制</a-button>

/**
 * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
import type { Directive, DirectiveBinding } from "vue";
import { ElMessage } from "element-plus";
interface ElType extends HTMLElement {
	copyData: string | number;
	__handleClick__: any;
}
const copy: Directive = {
    mounted(el: ElType, binding: DirectiveBinding) {
            el.copyData = binding.value;
            el.addEventListener("click", handleClick);
    },
    updated(el: ElType, binding: DirectiveBinding) {
            el.copyData = binding.value;
    },
    beforeUnmount(el: ElType) {
            el.removeEventListener("click", el.__handleClick__);
    }
};

function handleClick(this: any) {
    const input = document.createElement("input");
    input.value = this.copyData.toLocaleString();
    document.body.appendChild(input);
    input.select();
    document.execCommand("Copy");
    document.body.removeChild(input);
    ElMessage({
            type: "success",
            message: "复制成功"
    });
}

export default copy;

v-draggable 拖拽指令

/*
	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
	思路：
        1、设置需要拖拽的元素为absolute，其父元素为relative。
        2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
        3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
	4、鼠标松开(onmouseup)时完成一次拖拽
	使用：在 Dom 上加上 v-draggable 即可
	<div class="dialog-model" v-draggable></div>
*/
import type { Directive } from "vue";
interface ElType extends HTMLElement {
    parentNode: any;
}
const draggable: Directive = {
    mounted: function (el: ElType) {
        el.style.cursor = "move";
        el.style.position = "absolute";
        el.onmousedown = function (e) {
            let disX = e.pageX - el.offsetLeft;
            let disY = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                let x = e.pageX - disX;
                let y = e.pageY - disY;
                let maxX = el.parentNode.offsetWidth - el.offsetWidth;
                let maxY = el.parentNode.offsetHeight - el.offsetHeight;
                if (x < 0) {
                        x = 0;
                } else if (x > maxX) {
                        x = maxX;
                }

                if (y < 0) {
                        y = 0;
                } else if (y > maxY) {
                        y = maxY;
                }
                el.style.left = x + "px";
                el.style.top = y + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
        };
    }
};
export default draggable;