网站建设小程序公众号销售,wordpress newsletter,自己做的网站显示不全,百度网址域名大全一、前置知识 — Vue 中的自定义指令
先来说说 vue2和vue3中自定义全局指令的区别 相同点#xff1a;指令的应用场景#xff0c;原理是一致的#xff1b; 不同点#xff1a;生命周期钩子函数名#xff0c;指令定义的格式不一样。 vue2中自定义全局指令#xff1a;
定义…一、前置知识 — Vue 中的自定义指令
先来说说 vue2和vue3中自定义全局指令的区别 相同点指令的应用场景原理是一致的 不同点生命周期钩子函数名指令定义的格式不一样。 vue2中自定义全局指令
定义
// 注册一个全局自定义指令 v-focus
Vue.directive(focus, {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})使用
input v-foucsxxxx /vue3中自定义全局指令
定义
// app是Vue实例。 e.g: app createApp()
app.directive(指令名, {// 省略其他生命周期钩子函数// el 使用了指令的dom// binding.value: v-指令名binding.value就是这里表达式的值mounted (el, binding) {console.log(el, binding.value)}
})使用
元素 v-指令名xxx /扩展 在vue3中以插件的格式定义全局指令
定义
// 定义全局指令
export default {install (app) {// app是Vue实例。 e.g: app createApp()app.directive(指令名, {// 省略其他生命周期钩子函数// el 使用了指令的dom// binding.value: v-指令名binding.value就是这里表达式的值mounted (el, binding) {console.log(el, binding.value)}})}
}
使用(在main.js中注册插件)
import { createApp } from vue
import ./style.css
import App from ./App.vue
import router from ./router/index
import directives from ./directivescreateApp(App).use(router).use(directives).mount(#app)二、实现水印功能
前端实现水印功能的方式有很多这里主要讲解基于Canvas和MutationObserver的实现方式
1. 实现思路
配置水印的具体样式大小旋转角度文字填充设置水印位置监听dom变化防止水印删除后页面不再展示水印
2. 生成水印
通过将图片绘制在canvas中然后通过canvas的toDataURL方法将图片转为base64编码.
备注 toDataURL用法 toDataURL(type, encoderOptions)接收两个参数 type图片类型比如image/png、image/jpeg、image/webp等等默认为image/png格式 encoderOptions图片质量的取值范围0-1默认值为0.92当超出界限按默认值0.92 // 全局保存 canvas 和 div 避免重复创建单例模式
const globalCanvas null;
const globalWaterMark null;// 返回一个包含图片展示的 数据URL
const getDataUrl (binding: any) {const rotate -20;const canvas globalCanvas || document.createElement(canvas);const ctx canvas.getContext(2d); // 获取canvas画布的绘图环境ctx?.rotate((rotate * Math.PI) / 180); // 水印旋转角度ctx.font binding.font;ctx.fillStyle binding.fillStyle;ctx?.fillText(binding.text || 机密文件, canvas.width / 3, canvas.height / 2);return canvas.toDataURL(image/png);
};3. 使用MutationObserver监听水印
MutationObserver介绍 背景
MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品该功能是 DOM3 Events 规范的一部分。 构造函数
MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。 调用方法
disconnect()
阻止 MutationObserver 实例继续接收的通知直到再次调用其 observe() 方法该观察者对象包含的回调函数都不会再被调用。
observe()
配置 MutationObserver 在 DOM 更改匹配给定选项时通过其回调函数开始接收通知。
takeRecords()
从 MutationObserver 的通知队列中删除所有待处理的通知并将它们返回到 MutationRecord 对象的新 Array 中。
MutationObserver具体监听逻辑如下
1直接删除dom
先获取设置水印的dom监听到被删除元素的dom如果他两相等的话就停止观察初始化设置水印启动监控
2删除style中的属性
判断删除的是否是标签的属性 type “attributes”)判断删除的标签属性是否是在设置水印的标签上判断修改过的style和之前的style对比不等的话重新赋值
// watermark 样式
let style
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
pointer-events: none;;// 定义指令配置项
const directives: any {mounted(el: HTMLElement, binding: any) {// 注意img有onload的方法如果自定义指令注册在html标签的话只需要init(el, binding.value)el.onload init.bind(null, el, binding);// init(el, binding);},
};// 初始化
const init (el: HTMLElement, binding: any {}) {// 设置水印setWaterMark(el, binding.value);// 启动监控createObserver(el, binding.value);
};// 设置水印
const setWaterMark (el: HTMLElement, binding: any {}) {const { parentElement } el;// 获取对应的 canvas 画布相关的 base64 urlconst url getDataUrl(binding);// 创建 waterMark 父元素const waterMark globalWaterMark || document.createElement(div);waterMark.className water-mark; // 方便自定义展示结果style ${style}background-image: url(${url});;waterMark.setAttribute(style, style);// 将对应图片的父容器作为定位元素parentElement?.setAttribute(style, position: relative;);// 将图片元素移动到 waterMark 中parentElement?.appendChild(waterMark);
};/*** 监听 DOM 变化* 用 MutationObserver 对水印元素进行监听删除时我们再立即生成一个水印元素就可以了* param el* param binding*/
const createObserver (el: HTMLElement, binding: any) {const waterMarkEl el.parentElement?.querySelector(.water-mark);const observer new MutationObserver((mutationsList) {console.log(mutationsList, mutationsList)if (mutationsList.length) {const { removedNodes, type, target } mutationsList[0];const currStyle waterMarkEl?.getAttribute(style);// 证明被删除了if (removedNodes[0] waterMarkEl) {// 停止观察。调用该方法后DOM 再发生变动也不会触发观察器observer.disconnect();// 初始化设置水印启动监控init(el, binding);} else if (type attributes target waterMarkEl currStyle ! style) {waterMarkEl.setAttribute(style, style);}}});observer.observe(el.parentElement, {childList: true,attributes: true,subtree: true,});
};
4、效果展示 三、查看基于Vue3 实现的完整代码
1. 目录结构 2. main.js
import { createApp } from vue
import ./style.css
import App from ./App.vue
import router from ./router/index
import directives from ./directivescreateApp(App).use(router).use(directives).mount(#app)3. App.vue
script setup langts
import HelloWorld from ./views/HelloWorld.vue;
/scripttemplatediv!-- a hrefhttps://vuejs.org/ target_blankimg src./assets/vue.svg classlogo vue altVue logo //a --/divdivrouter-view //div
/templatestyle scoped
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
/style4. directives
/directives/index.ts
import type { App } from vue
import watermark from ./waterMarkexport default function installDirective(app: App) {app.directive(watermark.name, watermark.directives);
}
/directives/waterMark.ts // 全局保存 canvas 和 div 避免重复创建单例模式
const globalCanvas null;
const globalWaterMark null;// 返回一个包含图片展示的 数据URL
const getDataUrl (binding: any) {const rotate -20;const canvas globalCanvas || document.createElement(canvas);const ctx canvas.getContext(2d); // 获取canvas画布的绘图环境ctx?.rotate((rotate * Math.PI) / 180); // 水印旋转角度ctx.font binding.font;ctx.fillStyle binding.fillStyle;ctx?.fillText(binding.text || 机密文件, canvas.width / 3, canvas.height / 2);return canvas.toDataURL(image/png);
};// watermark 样式
let style
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
pointer-events: none;;// 定义指令配置项
const directives: any {mounted(el: HTMLElement, binding: any) {// 注意img有onload的方法如果自定义指令注册在html标签的话只需要init(el, binding.value)// el.onload init.bind(null, el, binding);init(el, binding);},
};// 初始化
const init (el: HTMLElement, binding: any {}) {// 设置水印setWaterMark(el, binding.value);// 启动监控createObserver(el, binding.value);
};// 设置水印
const setWaterMark (el: HTMLElement, binding: any {}) {const { parentElement } el;// 获取对应的 canvas 画布相关的 base64 urlconst url getDataUrl(binding);// 创建 waterMark 父元素const waterMark globalWaterMark || document.createElement(div);waterMark.className water-mark; // 方便自定义展示结果style ${style}background-image: url(${url});;waterMark.setAttribute(style, style);// 将对应图片的父容器作为定位元素parentElement?.setAttribute(style, position: relative;);// 将图片元素移动到 waterMark 中parentElement?.appendChild(waterMark);
};/*** 监听 DOM 变化* 用 MutationObserver 对水印元素进行监听删除时我们再立即生成一个水印元素就可以了* param el* param binding*/
const createObserver (el: HTMLElement, binding: any) {const waterMarkEl el.parentElement?.querySelector(.water-mark);const observer new MutationObserver((mutationsList) {console.log(mutationsList, mutationsList)if (mutationsList.length) {const { removedNodes, type, target } mutationsList[0];const currStyle waterMarkEl?.getAttribute(style);// 证明被删除了if (removedNodes[0] waterMarkEl) {// 停止观察。调用该方法后DOM 再发生变动也不会触发观察器observer.disconnect();// 初始化设置水印启动监控init(el, binding);} else if (type attributes target waterMarkEl currStyle ! style) {waterMarkEl.setAttribute(style, style);}}});observer.observe(el.parentElement, {childList: true,attributes: true,subtree: true,});
};export default {name: watermark,directives,
};
5. router/index
import { createRouter, createWebHashHistory, RouteRecordRaw } from vue-router;const routes: ArrayRouteRecordRaw [{path: /,name: HelloWorld,component: () import(../views/HelloWorld.vue),},{path: /watermark,name: Watermark,component: () import(../views/Watermark.vue),},]const router createRouter({history: createWebHashHistory(),routes,})export default router;6. views/Watermark.vue
script setup langts
import { reactive } from vue;
// 定义对象
const watermarkObj reactive({font: 16px normal,fillStyle: rgba(180, 180, 180, 0.3),text: 机密专用,
});
/script
templatediv classcontenth2出现水印/h2!-- div classcontentimg v-watermarkwatermarkObj src../assets/vue.svg classlogo /出现水印在 img 标签上/div --div v-watermarkwatermarkObj出现水印在 div 标签上/div/div
/template
style
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;display: none;
}
.content {width: 1000px;height: 900px;
}
/style
