vue 水印插件插件：directives.js

import Vue from 'vue'
/*** author: zuokun* 水印* text：水印文字* font：字体* textColor：文字颜色* width：宽度* height：高度* textRotate：偏转度 -90到0， 负数值，不包含-90*/
Vue.directive('watermark',(el,binding)=>{let text = binding.value.text;let font = binding.value.font || "16px Microsoft JhengHei";let textColor = binding.value.textColor || "rgba(215, 215, 215, 0.2)";let width = binding.value.width || 400;let height = binding.value.height || 200;let textRotate = binding.value.textRotate||-20;function addWaterMarker(parentNode){var can = document.createElement('canvas');parentNode.appendChild(can);can.width = width;can.height = height;can.style.display = 'none';var cans = can.getContext('2d');cans.rotate(textRotate * Math.PI / 180);cans.font = font;cans.fillStyle = textColor ;cans.textAlign = 'left';cans.textBaseline = 'Middle';cans.fillText(text, 0,  can.height);parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";}addWaterMarker(el)
})使用：1.引入：import  '@/utils/directives.js';
2.设置配置：复制代码watermarkConfig:{//水印
text:'测试水印',
font:'20px 微软雅黑',
textColor:'#bcbcbc',
width : 150, //水印文字的水平间距
height : 100, //水印文字的高度间距（低于文字高度会被替代）
extRotate : -30 //-90到0， 负数值，不包含-90
},复制代码
3.页面使用：<div  v-watermark="watermarkConfig">
</div>----------------------------------------------------------------------
页面完整代码：复制代码
<template><div id="test"><div class="bodydiv" v-watermark="watermarkConfig"></div></div>
</template><script>import Vue from 'vue';import  '@/utils/directives.js';export default {data() {return {watermarkConfig:{//水印text:'测试水印',font:'20px 微软雅黑',textColor:'#bcbcbc',width : 150, //水印文字的水平间距height : 100,  //水印文字的高度间距（低于文字高度会被替代）extRotate : -30 //-90到0， 负数值，不包含-90},}},methods: {},created() { //初始化加载},mounted() { //加载完成回调},}
</script><style>#test .bodydiv {width: 100%;height:1000px;}
</style>

效果

vue 水印插件插件：directives.js相关推荐

vue中打印插件vue-print-nb(一)——基本示例
vue中打印插件vue-print-nb(一)--基本示例 npm地址:https://www.npmjs.com/package/vue-print-nb 下载print.js地址:https:// ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
vue连线插件_一起写一个即插即用的 Vue Loading 插件
写在之前实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...
VUE颜色选择器插件vColorPicker
VUE颜色选择器插件vColorPicker 官网 vColorPicker官网跳转一.安装 npm install vcolorpicker -S 二.在 main.js 文件中引入插件并注册 / ...
基于vue前端聊天插件_基于Vue聊天的实现
基于vue前端聊天插件基本视频聊天 (basic-vue-chat) Easy to use VueJS chat. 易于使用的VueJS聊天. 安装 (Installation) You can ...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...

vue 水印插件插件：directives.js

vue 水印插件插件：directives.js相关推荐

最新文章

热门文章

vue 水印插件 插件：directives.js

vue 水印插件 插件：directives.js相关推荐

最新文章

热门文章

vue 水印插件插件：directives.js

vue 水印插件插件：directives.js相关推荐