vue3 常用指令 更新中

vue3 功能大全

v-waterMarker 水印指令

directive/waterMarker/index .ts

/**
 * v-waterMarker可接收参数，均为非必填
 * { text: 'vue-admin-box', font: '16px Microsoft JhengHei', textColor: '#000' }
 */
import {
    Color, FontFamilyProperty, FontProperty } from 'csstype'
import type {
    Directive, DirectiveBinding } from 'vue'

const directive: Directive = {
   
  mounted(el: HTMLElement, binding: DirectiveBinding) {
   
    binding.value ? binding.value : binding.value = {
   }
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor, )
  },
}

function addWaterMarker(str: string, parentNode: HTMLElement, font: FontProperty, textColor: Color) {
   
  // 水印文字，父元素，字体，文字颜色
  var can = document.createElement('canvas') as HTMLCanvasElement
  parentNode.appendChild(can)
  can.width = 200
  can.height = 150
  can.style.display = 'none'
  var 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'
  cans.fillText(str ||'He word' , can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}

export default directive

v-dragable 拖拽指令

directive/dragable/index .ts

/**
 * 支持父级，自定义父级，以及window作为父级
 * 使用示例：
 * 1. v-dragable
 * 2. v-dragable="'father'" // 使用父级作为父级
 * 3. v-dragable="'body'" // 使用body对象作为父级
 * 4. v-dragable="'#app'" // 使用id作为父级
 * 5. v-dragable="'.list'" // 使用class名作为父级
 * 3-5代表所有可被document.querySelector()解析的参数值
 **/
import type {
    Directive, DirectiveBinding } from 'vue'
interface Position {
   
  x: number,
  y: number
}
interface Mouse {
   
  down: Position,
  move: Position
}
interface ElType extends HTMLElement {
   
  __mouseDown__: any,
  __mouseUp__: any,
  __mouseMove__: any,
  __parentDom__: HTMLElement,
  __position__: Position
}
const directive: Directive = {
   
  mounted: (el: ElType, binding: DirectiveBinding) => {
   
    setParentDom(el, binding, false)
    // 子级元素位置处理
    // 1. 获取父子元素当前位置
    let parentDomRect: DOMRect
    let elDomRect: DOMRect
    let mouseData: Mouse = {
   
      down: {
    x: 0, y: 0},
      move: {
    x: 0, y: 0 }
    }
    let mouseDown