Vue中使用 watermark-dom 添加水印

越陌度阡

发布于 2020-12-14 11:01:25

4.7K0

发布于 2020-12-14 11:01:25

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

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

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-12-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

dom