当前位置：首页 > news >正文

实习随笔【前端技术实现全局添加水印】

news 来源：原创 2024/9/20 16:44:11

有一些数据比较重要的项目，往往需要对数据进行保护措施，本文介绍常见策略——全局添加水印。

1、创建水印组件

<template><div class="water-mark"><div class="water-mark-content"><span class="phone">{{ phone }}</span><span class="time">{{ time }}</span></div></div>
</template>
<script>
export default {name: 'WaterMark',props: {phone: {type: String,required: true,},time: {type: Number,required: true,},},
};
</script>
<style scoped>.water-mark {position: relative;width: 300px;height: 300px;background: url('../../assets/logo.png') no-repeat center;background-size: 80px;filter: brightness(0.7);pointer-events: none;color: rgba(26, 26, 26, 0.3);font-size: 10px;transform: rotate(-45deg);display: inline-block;opacity: 0.5;}.water-mark-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.phone {display: block;position: absolute;top: -15px;left: 50px;}.time {display: block;position: absolute;top: 0px;left: 50px;}
</style>

2、在公共组件使用水印组件

这里需要注意，水印的位置以及多少可由样式具体决定

<div class="water-wrap"><WaterMarkv-for="(item, index) in waterArr":key="`water-mark-${index}`":phone="userInfo.username":time="time.getTime()"/>
</div>// 水印内容——当前时间
time = new Date()// 水印数组控制水印数量
waterArr = Array(100).fill(1)// 水印样式控制水印显示区域
.water-wrap {position: fixed;bottom: 0;left: 0;top: 0;right: 0;overflow: hidden;z-index: 100000;pointer-events: none;}

3、对于不需要水印的页面（登录页）

可以用计算属性来判断，并用v-if（vue）或&&（react）控制显隐

// 以下例子以登录页不显示水印为例
<div v-if="isLoginPage" class="water-wrap"><WaterMarkv-for="(item, index) in waterArr":key="`water-mark-${index}`":phone="userInfo.username":time="time.getTime()"/>
</div>computed: {isLoginPage() {// 检查当前路由路径是否包含 '/login'return !this.$route.path.includes('/login');},
},