feat: 🎸 初始化项目

src/hooks/useExample.ts

@@ -0,0 +1,6 @@
+// 常用的增删改查 hook
+import { reactive } from 'vue'
+
+export function() {
+  
+}

src/hooks/useScrollTo.ts

@@ -0,0 +1,58 @@
+import { isFunction, isUnDef } from '@/utils/is'
+import { ref, unref } from 'vue'
+import { requestAnimationFrame } from '@/utils/animation'
+
+export interface ScrollToParams {
+  el: HTMLElement
+  position: string
+  to: number
+  duration?: number
+  callback?: () => any
+}
+
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+  t /= d / 2
+  if (t < 1) {
+    return (c / 2) * t * t + b
+  }
+  t--
+  return (-c / 2) * (t * (t - 2) - 1) + b
+}
+const move = (el: HTMLElement, position: string, amount: number) => {
+  el[position] = amount
+}
+
+export function useScrollTo({ el, position = 'scrollLeft', to, duration = 500, callback }: ScrollToParams) {
+  const isActiveRef = ref(false)
+  const start = el[position]
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = isUnDef(duration) ? 500 : duration
+
+  const animateScroll = function() {
+    if (!unref(isActiveRef)) {
+      return
+    }
+    currentTime += increment
+    const val = easeInOutQuad(currentTime, start, change, duration)
+    move(el, position, val)
+    if (currentTime < duration && unref(isActiveRef)) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      if (callback && isFunction(callback)) {
+        callback()
+      }
+    }
+  }
+  const run = () => {
+    isActiveRef.value = true
+    animateScroll()
+  }
+
+  const stop = () => {
+    isActiveRef.value = false
+  }
+
+  return { start: run, stop }
+}

src/hooks/useWaterMark.ts

@@ -0,0 +1,67 @@
+declare interface Fn<T = any, R = T> {
+  (...arg: T[]): R
+}
+
+import { getCurrentInstance, onBeforeUnmount, ref, Ref, unref } from 'vue'
+
+const domSymbol = Symbol('watermark-dom')
+
+export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.body)) {
+  let func: Fn = () => {}
+  const id = domSymbol.toString()
+  const clear = () => {
+    const domId = document.getElementById(id)
+    if (domId) {
+      const el = unref(appendEl)
+      el && el.removeChild(domId)
+    }
+    window.removeEventListener('resize', func)
+  }
+  const createWatermark = (str: string) => {
+    clear()
+
+    const can = document.createElement('canvas')
+    can.width = 300
+    can.height = 240
+
+    const cans = can.getContext('2d')
+    if (cans) {
+      cans.rotate((-20 * Math.PI) / 120)
+      cans.font = '15px Vedana'
+      cans.fillStyle = 'rgba(0, 0, 0, 0.15)'
+      cans.textAlign = 'left'
+      cans.textBaseline = 'middle'
+      cans.fillText(str, can.width / 20, can.height)
+    }
+
+    const div = document.createElement('div')
+    div.id = id
+    div.style.pointerEvents = 'none'
+    div.style.top = '0px'
+    div.style.left = '0px'
+    div.style.position = 'absolute'
+    div.style.zIndex = '100000000'
+    div.style.width = document.documentElement.clientWidth + 'px'
+    div.style.height = document.documentElement.clientHeight + 'px'
+    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+    const el = unref(appendEl)
+    el && el.appendChild(div)
+    return id
+  }
+
+  function setWatermark(str: string) {
+    createWatermark(str)
+    func = () => {
+      createWatermark(str)
+    }
+    window.addEventListener('resize', func)
+    const instance = getCurrentInstance()
+    if (instance) {
+      onBeforeUnmount(() => {
+        clear()
+      })
+    }
+  }
+
+  return { setWatermark, clear }
+}