vue3实现水印防篡改
在Vue开发中,我们经常需要实现一些特定功能,比如在网站上显示水印以防止内容被篡改。本文将介绍如何使用Vue和一些特定的Hooks来实现水印防篡改功能。
在Web开发中,图片懒加载是提高页面加载速度和性能的重要技术之一。而Vue 3作为当下流行的前端框架,提供了方便易用的自定义指令功能,可以轻松实现图片懒加载效果。本文将介绍如何使用Vue 3编写一个图片懒加载的自定义指令,而且完全不依赖第三方包。
首先,确保你已经创建了一个Vue 3项目,并且已经安装了TypeScript。接下来,我们将开始编写自定义指令。
我们给指令取名为LazyLoadDirective。下面是指令的实现代码:
// src/directives/lazyload.ts
import { Directive, App, ObjectDirective } from 'vue';
export const LazyLoadDirective: ObjectDirective = {
mounted(el: HTMLElement) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target as HTMLImageElement;
img.src = img.dataset.src!;
observer.unobserve(img);
}
});
});
observer.observe(el);
},
};
在Vue 3中,通过app.directive来创建自定义指令。在 main.ts中调用LazyLoadDirective
函数:
import { createApp } from 'vue'
import { LazyLoadDirective } from './directives/lazyload'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.directive('lazyload', LazyLoadDirective)
app.mount('#app')
lazyload
。mounted
生命周期钩子中,使用IntersectionObserver监听图片是否进入视口。src
属性设置为图片真实的地址,从而实现图片懒加载效果。为了提高用户体验,我们可以在图片加载之前显示占位图,图片加载失败时显示错误图。你可以在src
属性中设置占位图的地址,以及在onerror
事件中设置错误图的地址。
<template>
<div class="list">
<div class="item" v-for="item in state.list" :key="item.id">
<img v-lazyload :data-src="item.src" src='/loading.png' :alt="item.alt" @error="handleError">
</div>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const state = reactive({
list: [
{ id: 1, src: '1.png', alt: '图片1' },
{ id: 2, src: '2.png', alt: '图片2' },
{ id: 3, src: '3.png', alt: '图片3' },
],
})
const handleError = (event: Event) => {
const img = event.target as HTMLImageElement
// 设置错误图
img.src = '/error.png'
}
</script>