功能效果之水印

最新推荐文章于 2023-10-17 15:02:36 发布

原创最新推荐文章于 2023-10-17 15:02:36 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #水印

开发专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍如何在Vue项目中添加动态水印，包括下载watermark.js文件，将其导入到App.vue，以及如何通过监听路由变化和使用sessionStorage来动态显示水印。此方法适用于需要保护版权或标识用户身份的Web应用。

vue项目添加水印

下载文件watermark.js

1. 在App.vue中，导入改文件

import Watermark from '@/static/js/watermark.js'

2. 监听路由变化

watch: {
  $route (to, from) {
    if (to.path === '/login') {
      Watermark.set('')
    } else {
      if (sessionStorage.token === undefined) {
        Watermark.set('')
      } else {
        Watermark.set(sessionStorage.userId)
      }
    }
  }
}