vue3 常用指令更新中

原创

已于 2024-07-16 08:46:48 修改 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言 #vue #typescript

于 2024-03-27 11:34:43 首次发布

本文介绍了Vue3中的四个实用指令：v-waterMarker实现文字水印效果，v-dragable提供自定义拖拽功能，v-copy用于复制文本到剪贴板，v-longpress实现长按时触发事件，以及v-debounce防止频繁点击带来的性能问题。

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

<template>
  <div class="layout-container">
    <div class="layout-container-table" v-waterMarker>
      我是一个水印页面
    </div>
  </div>
</template>
<script setup lang="ts">
import WaterMarker from '@/directive/waterMarker'
</script>
<style lang="scss" scoped>
</style>

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: boolean