@qy_better_lib/hooks 0.0.2

package/src/use-waterMark/index.ts

@@ -0,0 +1,101 @@
+type UseWaterMark = {
+  /**
+   * 创建水印
+   */
+  createWaterMark: (
+    warper: string | null,
+    str1: string,
+    str2?: string,
+    textColor?: string
+  ) => void;
+  /**
+   * 移除水印
+   */
+  removeWatermark: () => void;
+};
+/**
+ * ==============================================
+ * 水印功能
+ * ==============================================
+ */
+export default function useWaterMark(): UseWaterMark {
+  const id: string = "A77B030B-E33D-C656-7642-56D6FEA46059";
+
+  /**
+   * 添加水印方法
+   * @param warper 绘制容器DOM
+   * @param str1 主标题
+   * @param str2 副标题
+   * @param textColor 文字颜色
+   */
+  function createWaterMark(
+    warper: string | null = null,
+    str1: string,
+    str2?: string,
+    textColor?: string
+  ): void {
+    let id: string = setWatermark(warper, str1, str2, textColor);
+    if (document.getElementById(id) === null) {
+      id = setWatermark(warper, str1, str2);
+    }
+  }
+
+  /**
+   * 移除水印
+   */
+  function removeWatermark(): void {
+    const element: HTMLElement | null = document.getElementById(id);
+    element?.remove();
+  }
+
+  function setWatermark(
+    warper: string | null = null,
+    str1: string,
+    str2?: string,
+    textColor: string = "#999"
+  ) {
+    const warperElement: Element | null =
+      warper != null ? document.querySelector(warper) : document.body;
+    const element: HTMLElement | null = document.getElementById(id);
+    if (element !== null) {
+      warperElement?.removeChild(element);
+    }
+
+    let canvas: HTMLCanvasElement | null = document.createElement("canvas");
+    // 设置canvas画布大小
+    canvas.width = 250;
+    canvas.height = 150;
+
+    let cans: CanvasRenderingContext2D | null = canvas.getContext("2d");
+    if (cans) {
+      cans.font = "16px Avenir,Helvetica,Arial,sans-serif";
+      cans.fillStyle = textColor.replace(/\,\s(1|(0.\d+)\))/, ", 0.1"); //设置水印的颜色
+      cans.textAlign = "left";
+      cans.textBaseline = "middle";
+      cans.rotate((-15 * Math.PI) / 180); // 水印旋转角度
+      cans?.fillText(str1, 0, canvas.height); // 水印在画布的位置x，y轴
+      str2 &&
+        cans?.fillText(str2, cans.measureText(str1).width + 16, canvas.height);
+    }
+
+    let div: HTMLDivElement | null = document.createElement("div");
+    div.id = id;
+    div.style.pointerEvents = "none";
+    div.style.top = "0px";
+    div.style.left = "0px";
+    div.style.position = "fixed";
+    div.style.zIndex = "100000";
+    const { clientWidth, clientHeight } = document.documentElement;
+    div.style.width = clientWidth + "px";
+    div.style.height = clientHeight + "px";
+    div.style.background =
+      "url(" + canvas.toDataURL("image/png") + ") left top repeat";
+    warperElement?.appendChild(div);
+    return id;
+  }
+
+  return {
+    createWaterMark,
+    removeWatermark,
+  };
+}

package/src/use-websocket/index.ts

@@ -0,0 +1,117 @@
+export type WebSocketOption = {
+  /**服务端地址 */
+  server: string;
+  /**消息接收处理方法 */
+  receive: (res: any) => void;
+};
+
+/**
+ * WebSocket
+ */
+export default function useWebSocket(option: WebSocketOption) {
+  /**重连次数 */
+  let count = 0;
+  /**是否能重连  */
+  let lockReconnect = false;
+  //   const text1 = "您有新的订单，请及时处理！";
+  /**WebSocket对象 */
+  let ws: WebSocket | undefined = undefined;
+
+  let reconnectTimer: any;
+
+  const { server, receive } = option;
+
+  /**浏览器关闭 */
+  window.onbeforeunload = () => {
+    ws?.close();
+  };
+
+  /**创建连接  */
+  function create() {
+    try {
+      ws = new WebSocket(server);
+      // 连接建立时触发
+      initEventHandle();
+    } catch (e) {
+      console.log("连接建立异常", e);
+    }
+  }
+
+  /**重连 */
+  function reconnect() {
+    // 多次重连失败，关闭
+    if (count >= 5) {
+      ws?.close();
+      return;
+    }
+    if (lockReconnect) return false;
+    lockReconnect = true;
+    reconnectTimer = setTimeout(function () {
+      create();
+      lockReconnect = false;
+      count++;
+      reconnectTimer && clearTimeout(reconnectTimer);
+    }, 5000);
+  }
+
+  /**
+   * ws事件
+   */
+  function initEventHandle() {
+    if (!ws) return;
+    // 连接报错
+    ws.onerror = (e) => {
+      console.log("连接错误", e);
+      reconnect();
+    };
+    // 连接关闭
+    ws.onclose = () => {
+      console.log("连接关闭 - " + new Date().toLocaleTimeString());
+      reconnect();
+    };
+    // 链接成功
+    ws.onopen = () => {
+      // 心跳检测重置
+      // heartReset();
+      // heartStart();
+      // 重置重连次数
+      count = 0;
+      console.log("连接成功");
+    };
+    // 接收消息
+    ws.onmessage = (e) => {
+      // 如果获取到消息，心跳检测重置
+      // heartReset();
+      // heartStart();
+      // 处理消息
+      try {
+        // 接收消息给调用者处理
+        receive(e);
+      } catch {
+        console.log("message:" + e.data);
+      }
+    };
+  }
+
+  /**
+   * 发送消息
+   * @param msg 发送的消息
+   */
+  function sendMessage(msg: any) {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws?.send(msg);
+    }
+  }
+
+  /**关闭ws */
+  function socketClose() {
+    ws?.close();
+  }
+
+  return {
+    ws,
+    create,
+    socketClose,
+    sendMessage,
+  };
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {},
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts"]
+}

package/types/index.d.ts

@@ -0,0 +1 @@
+declare type $TODO = any

package/types/json.d.ts

@@ -0,0 +1,4 @@
+declare module "*.json" {
+    const value: any;
+    export default value;
+}

package/types/vue.shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const Component: ComponentOptions
+  export default Component
+}