脚本宝典收集整理的这篇文章主要介绍了Vue使用自定义指令实现页面底部加水印,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等
实现效果
实现代码
<template> <div class="water-marker" > <div v-waterMarker="{text:'卡洛背心 - 版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"> <div class="water-marker-item">测试问题啊测试问题啊测试问题啊测试问题啊测试问题啊测试问题啊</div> </div> </div> </template> <script> import waterMarker From '../../directive/test/waterMarker' export default { directives: { waterMarker }, data(){ return{ } }, methods:{ } } </script> <style lang="scss"> .water-marker{ height: 300px; .water-marker-ITem{ line-height: 300px; } } </style>
waterMarker.js文件如下:
function addWaterMarker(str, parentNode, font, textColor) { // 水印文字,父元素,字体,文字颜色 VAR can = document.createElement('canvas') parentNode.apPEndChild(can) can.width = 200 can.height = 150 can.style.display = 'none' var cans = can.getContext('2d') cans.rotate((-20 * Math.PI) / 180) cans.font = font || '16px Microsoft JhengHei' cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)' cans.textAlign = 'left' cans.textBaseline = 'Middle' cans.fillText(str, can.width / 10, can.height / 2) parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')' } const waterMarker = { bind: function (el, binding) { addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor) }, } export default waterMarker
到此这篇关于Vue使用自定义指令实现页面底部加水印的文章就介绍到这了,更多相关Vue 页面底部加水印内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的Vue使用自定义指令实现页面底部加水印全部内容,希望文章能够帮你解决Vue使用自定义指令实现页面底部加水印所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。