Encapsulate the global watermark command in vue3 - add watermark (use)

Today, I saw the instruction packaged by the company teacher and felt that it was necessary to learn it. Let's take a look together. I just keep a copy of the teacher's knowledge, I should be happy to see it, haha

First: Create a new directive folder in the vue3 project, and create a new waterMarker folder – index.ts file under the directive file.
As shown in the second picture

: index.ts-directive theme part under the waterMarker folder

/**
 * 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 = {
    
    
//el: HTMLElement,绑定的父级DOM//     binding: DirectiveBinding//指令传来的参数对象
  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 ||'vue-admin-box' , can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}

export default directive

Third: Introduce the directive theme in the index.ts file under directive (all directives are summarized in this folder for easy maintenance and management)
code:

import waterMarker from "./waterMarker";
const directivesList: any = {
    
    
    // 这里放指令
    waterMarker,//水印指令
};
const directives = {
    
    
    install: function (app: App<Element>) {
    
    
        Object.keys(directivesList).forEach(key => {
    
    
            // 注册自定义指令
            app.directive(key, directivesList[key]);
        });
    }
};
 
export default directives;

Fourth: The third part of the file is imported globally in main.ts, where main.ts is only for watermark instructions

// An highlighted block
import App from './App.vue'
import directives from './directive'
const app = createApp(App)
app.use(directives)
app.config.performance = true
app.mount('#app')

Finally use:

// text为水印内容，textColor水印内容颜色
<div class="box" v-waterMarker="{text: 'Watermark Direct',textColor: 'rgba(180, 180, 180, 0.6)'}">水印指令</div>

The above is the content of the instruction, and the next article (application) will solve some practical scenarios.