阅读量:0
有一些数据比较重要的项目，往往需要对数据进行保护措施，本文介绍常见策略——全局添加水印。
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"> <WaterMark v-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"> <WaterMark v-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'); }, }, 