diff --git a/src/main.js b/src/main.js index 586ab58..2d5010c 100644 --- a/src/main.js +++ b/src/main.js @@ -22,6 +22,9 @@ import i18n from './lang' // internationalization import selectLoadMore from '@/utils/loadmore.js'; import _ from 'lodash' +import watermark from '@/utils/shuiyin' + +Vue.prototype.$watermark = watermark; Vue.config.productionTip = false Vue.prototype.$m = moment Vue.use(ElementUI, { @@ -54,6 +57,15 @@ Vue.directive('removeAriaHidden', { }); } }); + +router.afterEach((item) => { + let { userName, mobilePhone } = store.state.user.userInfo + if (item.path !== '/login') { //判断是否为登录页面,水印的内容可自定义设置 + watermark.set(userName, mobilePhone); + }else{ + watermark.set('','',''); + } +}) export default new Vue({ router, store, diff --git a/src/utils/shuiyin.js b/src/utils/shuiyin.js new file mode 100644 index 0000000..4f136ee --- /dev/null +++ b/src/utils/shuiyin.js @@ -0,0 +1,65 @@ +let watermark = {} + +let setWatermark = (str,str2,str3) => { + let id = '1.23452384164.123412416'; + + if (document.getElementById(id) !== null) { + document.body.removeChild(document.getElementById(id)); + } + + //创建一个画布 + let can = document.createElement('canvas'); + //设置画布的长宽,可以通过调节画布的宽高去设置水印分布的密度 + can.width = 350; + can.height = 160; + + let cans = can.getContext('2d'); + //旋转角度 + cans.rotate(-12 * Math.PI / 150); + cans.font = '18px Vedana'; + //设置填充绘画的颜色、渐变或者模式 + cans.fillStyle = 'rgba(200, 200, 200, 0.40)'; + //设置文本内容的当前对齐方式 + cans.textAlign = 'left'; + //设置在绘制文本时使用的当前文本基线 + cans.textBaseline = 'Middle'; + //在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置) + // cans.fillText(str, can.width / 6, can.height / 2); + if(str){ + cans.fillText(str, 15, 80) //第一行字体 + } + if(str2){ + cans.fillText(str2, 15, 110) //第二行字体 + } + if(str3){ + cans.fillText(str3, 15, 140)//第三行字体 + } + + let div = document.createElement('div'); + div.id = id; + div.style.pointerEvents = 'none'; + div.style.top = '30px'; + div.style.left = '0px'; + div.style.position = 'fixed'; + div.style.zIndex = '200000'; + 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; +} + +// 该方法只允许调用一次 +watermark.set = (str,str2,str3) => { + let id = setWatermark(str,str2,str3); + setInterval(() => { + if (document.getElementById(id) === null) { + id = setWatermark(str,str2,str3); + } + }, 500); + window.onresize = () => { + setWatermark(str,str2,str3); + }; +} + +export default watermark; \ No newline at end of file