vue给页面添加水印

原创

于 2024-04-16 14:21:23 发布 · 置顶 · 631 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何使用Vue和MutationObserver在页面上动态添加背景水印，包括实心、虚线和渐变效果的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`vue给页面添加水印`

在这里插入图片描述

<template>
  <div class="home">
    <router-view />
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {}
    },
    computed: {},
    mounted() {
      // 获取需要观察的节点
      const target = document.querySelector('.home')
      // 观察器配置
      const config = {
        attributes: true, // 监听目标元素属性的变化
        childList: true, // 监听目标原型子节点的变化
        subtree: false, // 是否观察后代的变化。默认false
      }
      // 创建观察器
      const observer = new MutationObserver(() => {
        // 获取背景图片
        const bgi = target?.style?.backgroundImage
        console.log('背景的值：', bgi)
        if (!bgi) {
          // 当背景被取消后，重新添加
          this.initWaterm