Vue 2.0中使用watermark-dom 添加水印

本文介绍了一款名为Watermark-dom的Vue插件,可用于给网页添加或移除水印,并支持丰富的样式设置。通过简单的代码示例展示了如何根据用户的登录状态动态加载包含用户名和日期的水印。

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

Watermark-dom是一个可以给网页添水印、移除水印的插件,并可以对水印的样式进行许多丰富的设置。

以下是在Vue中使用该插件的方式:

<template>
    <!-- App.vue 文件-->
    <div id="app">
        <router-view />
    </div>
</template>

<script>

// 安装文件,如果安装报错,可以用cnpm
// npm install watermark-dom --save
// npm install js-cookie --save

import watermark from 'watermark-dom'
import Cookies from 'js-cookie'

export default {
    name: "App",
    mounted(){
        setTimeout(()=>{

            // 在登录文件中,登录成功后,记得将用户名存到本地cookie中
            // Cookies.set('username',username);

            // 获取cookie中的username添加水印
            let username = Cookies.get('username');
            if(username){
                let now = new Date();
                let year = now.getFullYear();
                let month = now.getMonth()+1;
                let day = now.getDate();
                month = month<10?'0'+month:month;
                day = day<10?'0'+day:day;
                let date = year+'-'+month+'-'+day;
                watermark.load({ watermark_txt: username+','+date })
            }
        },1000)
    }
};
</script>

相关文档:https://github.com/saucxs/watermark-dom

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾光远

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值