网站在线做照片,黄山网站建设推广,网页翻译插件哪个好用,做淘宝要用的网站有一些数据比较重要的项目#xff0c;往往需要对数据进行保护措施#xff0c;本文介绍常见策略——全局添加水印。 1、创建水印组件
templatediv classwater-markdiv classwater-mark-contentspan classphone往往需要对数据进行保护措施本文介绍常见策略——全局添加水印。 1、创建水印组件
templatediv classwater-markdiv classwater-mark-contentspan classphone{{ phone }}/spanspan classtime{{ 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;}
/style2、在公共组件使用水印组件 这里需要注意水印的位置以及多少可由样式具体决定 div classwater-wrapWaterMarkv-for(item, index) in waterArr:keywater-mark-${index}:phoneuserInfo.username:timetime.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-ifvue或react控制显隐 // 以下例子以登录页不显示水印为例
div v-ifisLoginPage classwater-wrapWaterMarkv-for(item, index) in waterArr:keywater-mark-${index}:phoneuserInfo.username:timetime.getTime()/
/divcomputed: {isLoginPage() {// 检查当前路由路径是否包含 /loginreturn !this.$route.path.includes(/login);},
},
