您的位置:首页 > 编程学习 > > 正文

vue怎么更换自定义水印(Vue之全局水印的实现示例)

更多 时间:2021-10-04 01:38:09 类别:编程学习 浏览量:1837

vue怎么更换自定义水印

Vue之全局水印的实现示例

【需求】系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印)

1.创建水印Js文件
  • /*
     * @Author: 刘小二
     * @Date: 2021-07-15 14:43:27
     * @LastEditTime: 2021-07-15 15:00:27
     * @LastEditors: Please set LastEditors
     * @Description: 添加水印
     * @FilePath: /huashijc_MeetingSys/src/common/warterMark.js
     */
    'use strict'
     
    let watermark = {}
     
    let setWatermark = (str) => {
      let id = '1.23452384164.123412415'
     
      if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id))
      }
     
      let can = document.createElement('canvas')
      can.width = 250
      can.height = 120
     
      let cans = can.getContext('2d')
      cans.rotate(-15 * Math.PI / 150)
      cans.font = '20px Vedana'
      cans.fillStyle = 'rgba(200, 200, 200, 0.20)'
      cans.textAlign = 'left'
      cans.textBaseline = 'Middle'
      cans.fillText(str, can.width / 8, can.height / 2)
     
      let li = document.createElement('li')
      li.id = id
      li.style.pointerEvents = 'none'
      li.style.top = '35px'
      li.style.left = '0px'
      li.style.position = 'fixed'
      li.style.zIndex = '100000'
      li.style.width = document.documentElement.clientWidth + 'px'
      li.style.height = document.documentElement.clientHeight + 'px'
      li.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
      document.body.appendChild(li)
      return id
    }
     
    // 该方法只允许调用一次
    watermark.set = (str) => {
      let id = setWatermark(str)
      setInterval(() => {
        if (document.getElementById(id) === null) {
          id = setWatermark(str)
        }
      }, 500)
      window.onresize = () => {
        setWatermark(str)
      }
    }
    
    const outWatermark = (id) => {
        if (document.getElementById(id) !== null) {
          const li = document.getElementById(id)
          li.style.display = 'none'
        }
    }
    watermark.out = () => {
        const str = '1.23452384164.123412415'
        outWatermark(str)
    }
     
    export default watermark
    
  • 2.引入操作

    2.1 在App.vue中引用或其他页面

  • // 1.在App.vue文件中,导入该文件
    import Watemark from '@/common/watermark';
    
    computed: {
      userName() {
        const name = this.$store.state.user.name
        return (name && name.length > 0) ? name : '未获取到用户名'
      }
    },
    mounted() {
      Watermark.set(this.userName)
    }
    
    // 2.在其他页面引用
    import Watemark from '@/common/watermark';
    
    created() {
      Watermark.set('admin')
    }
    
  • 2.2 在router配置文件中引用

  • const outWatermark = (id) => {
      if (document.getElementById(id) !== null) {
        const li = document.getElementById(id)
        li.style.display = 'none'
      }
    }
    
    router.afterEach((to) => {
     if(to.path == '/'){
      Watermark.out() // 清除水印
     }else{
      Watermark.set('未获取到用户名') // 设置水印title
     }
    });
    
    
    
  • 到此这篇关于Vue之全局水印的实现示例的文章就介绍到这了,更多相关Vue 全局水印内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    标签:Vue 全局 水印
    您可能感兴趣