Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge about how to achieve Vue global watermarking. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

[demand] Watermark is displayed on the page in the system, and there is no watermark on the login page (when you log out, the login page does not display a watermark)

1. Create a watermark Js file

/ * * @ Author: Liu Xiaoer * @ Date: 2021-07-15 14:43:27 * @ LastEditTime: 2021-07-15 15:00:27 * @ LastEditors: Please set LastEditors * @ Description: add a watermark * @ 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 = 250can.height = 120let cans = can.getContext ("2d") cans.rotate (- 15 * Math.PI / 150) cans.font = "20px Vedana" cans.fillStyle = "rgba 200,200,0.20) "cans.textAlign =" left "cans.textBaseline =" Middle "cans.fillText (str, can.width / 8) Can.height / 2) let div = document.createElement ("div") div.id = id div.style.pointerEvents = "none" div.style.top = "35px" div.style.left = "0px" div.style.position = "fixed" div.style.zIndex = "100000" div.style.width = document.documentElement.clientWidth + "px" div.style.height = document.documentElement.clientHeight + "px" div.style.background = "url (" + can.toDataURL " ("image/png") + ") left top repeat" document.body.appendChild (div) return id} / / this method is only allowed to be called once watermark.set = (str) = > {let id = setWatermark (str) setInterval (() = > {if (document.getElementById (id) = null) {id = setWatermark (str)}} ) _ window.onresize = () = > {setWatermark (str)}} const outWatermark = (id) = > {if (document.getElementById (id)! = = null) {const div = document.getElementById (id) div.style.display = "none"} watermark.out = () = > {const str = "1.23452384164.123412415" outWatermark (str)} export default watermark2. Lead in operation

2.1 references or other pages in App.vue

/ / 1. In the App.vue file, import the file import Watemark from "@ / common/watermark"; computed: {userName () {const name = this.$store.state.user.name return (name & & name.length > 0)? Name: "user name not obtained"}}, mounted () {Watermark.set (this.userName)} / / 2. Reference import Watemark from "@ / common/watermark" on other pages Created () {Watermark.set ("admin")} 2.2 reference const outWatermark = (id) = > {if (document.getElementById (id)! = = null) {const div = document.getElementById (id) div.style.display = "none"} router.afterEach ((to) = > {if (to.path = "/") {Watermark.out () / / clear watermark} else {Watermark.set () in the router configuration file Did not get the user name ") / / set watermark title}}) These are all the contents of this article entitled "how to achieve Vue Global Watermark". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.