精华内容
下载资源
问答
  • 2022-06-30 11:46:21

    1、创建directive.js,并引入/src/utils下

    import Vue from 'vue'
    
    Vue.directive('watermark',(el,binding)=>{
      function addWaterMarker(str,parentNode,font,textColor){// 水印文字,父元素,字体,文字颜色
        var can = document.createElement('canvas');
        parentNode.appendChild(can);
        can.width = 130;
        can.height = 180;
        can.style.display = 'none';
        var cans = can.getContext('2d');
        cans.rotate(-40 * Math.PI / 180);
        cans.font = font || "18px Microsoft JhengHei";
        cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
        cans.textAlign = 'center';
        cans.textBaseline = 'Middle';
        cans.fillText(str, can.width / 5, can.height / 3);
        parentNode.style.zIndex = '100000'
        parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
      }
      addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
    })
    

    2、在main.js中全局引入

    import  '@/utils/directives'

    3、水印使用

    <div class="watermark"
        v-watermark="{text:'水印文字',textColor:'rgba(180, 180, 180, 1)'}">
    </div>

    在所需要盒子的div上直接使用v-watermark自定义指令即可

     解决水印会被子盒子盖住的问题

    1)建立一个专门的水印盒子(大小自定)

    2)用定位将盒子固定在所需位置

    3)因为parentNode.style.zIndex = '100000',水印优先级已经最高,所以会覆盖下面盒子的各种事件,只需在水印盒子的style里加上pointer-events: none即可,可达到事件穿透。

      .watermark {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 480px;
        height: 610px;
        pointer-events: none;
      }

    更多相关内容
  • vue页面添加自定义水印

    封装创建水印方法,创建waterMark.js文件

    let watermark = {}
    let setWatermark = (str) => {
      let id = '1.23452384164.123412416';
      if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
      }
    
      //创建一个画布
      let can = document.createElement('canvas');
      //设置画布的长宽
      can.width = 400;
      can.height = 280;
    
      let cans = can.getContext('2d');
      //旋转角度,水印文本倾斜角度
      cans.rotate(-25 * Math.PI / 180);
      cans.font = '15px Vedana';
      //设置填充绘画的颜色、渐变或者模式
      cans.fillStyle = 'rgba(50, 40, 255, 0.2)';
      //设置文本内容的当前对齐方式
      cans.textAlign = 'left';
      //设置在绘制文本时使用的当前文本基线
      cans.textBaseline = 'Middle';
      //在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置)
      cans.fillText(str, can.width / 2, can.height / 2);
    
      let div = document.createElement('div');
      div.id = id;
      div.style.pointerEvents = 'none';
      div.style.top = '0';
      div.style.left = '0';
      div.style.position = 'absolute';
      div.style.zIndex = '3000';
      div.style.width = '100%';
      //如果数据加载慢或者延迟较高时,获取的文档高度可能不准确,水印可能不能覆盖全部文档页面,所以加一个延时
      setTimeout(()=>{
        div.style.height = document.documentElement.scrollHeight + 'px';
      },500)
      div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
      document.body.appendChild(div);
      return id;
    }
    
    watermark.set = (str) => {
      let id = setWatermark(str);
      setInterval(() => {
        if (document.getElementById(id) === null) {
          id = setWatermark(str);
        }
      }, 500);
      //窗口大小变化会重新生成
      window.onresize = () => {
        setWatermark(str);
      };
    }
    export default watermark;
    
    

    使用方式:

    在.vue文件或app.vue中引入
    import watermark from './createWaterMark'    //注意你项目中的路径
    
    //在mounted中直接调用即可
    mounted(){
        Watermark.set("水印内容")
    }
    
    展开全文
  • 先去vue官网看看自定义指令: 有了钩子和钩子参数,具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式,具体的: 'use strict'; exports.__esModule = true; /** * 自定义指令'v-watermark' * 可以...

    最近遇到个给页面添加水印的需求(之前没弄过也没见过这种效果),然后组长还要求我使用指令的方式实现,做到水印内容、样式基本可配置,说是以后再有这种需求的话就不用再开发了(嗯,道理我都懂,就是有点儿迷茫…)

    先去vue官网看看自定义指令
    在这里插入图片描述
    在这里插入图片描述
    有了钩子和钩子参数,具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式,具体的:

    'use strict';
    
    exports.__esModule = true;
    
    /**
     * 自定义指令'v-watermark'
     * 可以传入自定义参数(v-watermark="markObj"),参数(markObj)格式为
     * {
     *      text: '水印内容',  // 水印文字内容
     *      angle: 25,  // 水印倾斜度
     *      color: 'rgba(0,0,0,.15)',  // 水印文字颜色
     *      fontSize: '16px',  //   水印文字大小
     *      top: 70  // 水印区域距离浏览器可视区域顶部的距离,单位px
     * }
     * 参数是可选的,不传的时候可以直接使用 v-watermark 指令即可
     */
    
    // 记录上一次生成水印的 div 元素 id
    let prevDivId = 0;
    
    const number180 = 180;
    
    // 生成水印
    const setWatermark = markObj => {
        // 默认设置
        const defaultObj = {
            text: '水印内容',
            angle: 25,
            color: 'rgba(0,0,0,.15)',
            fontSize: '16px',
            top: 70
        }
        Object.assign(defaultObj, markObj);
        // 角度转成负数
        defaultObj.angle = -Math.abs(defaultObj.angle);
        // 随机生成一个 id
        const id = Math.random();
        // 清除上次的水印 div[解决:窗口大小调整时(onresize方法)水印会叠加,导致颜色加深的问题]
        if(prevDivId && document.getElementById(prevDivId) !== null) {
            document.body.removeChild(document.getElementById(prevDivId));
        }
        // 记录 id
        prevDivId = id;
    
        // 创建画布
        const canvas = document.createElement('canvas');
        // 设置画布的长、宽
        canvas.width = 240;
        canvas.height = 180;
    
        const context = canvas.getContext('2d');
    
        // 旋转角度(以弧度计)
        context.rotate((defaultObj.angle*Math.PI)/number180);
        context.font = defaultObj.fontSize + ' 微软雅黑';
        // 设置填充绘画的颜色、渐变或者模式
        context.fillStyle = defaultObj.color;
        context.textAlign = 'left';
        context.textBaseline = 'middle';
        context.fillText(defaultObj.text, 0, canvas.height);
    
        const div = document.createElement('div');
        div.id = prevDivId;
        div.style.pointerEvents = 'none';
        div.style.position = 'absolute';
        div.style.top = defaultObj.top + 'px';
        div.style.left = '0px';
        div.style.zIndex = '9999';
        div.style.width = document.documentElement.scrollWidth + 'px';
        div.style.height = document.documentElement.scrollHeight + 'px';
        div.style.background = 'url('+canvas.toDataURL('image/png')+') left top repeat';
        document.body.appendChild(div);
        return prevDivId;
    }
    
    exports.default = {
        bind: function bind(binding) {
            setWatermark(binding.value || {});
            // 监听窗口变化事件
            window.onresize = () => {
                if(prevDivId !== 0) {
                    setWatermark(binding.value || {});
                }
            }
            // 监听页面滚动
            window.onscroll = () => {
                if(prevDivId !== 0) {
                    setWatermark(binding.value || {});
                }
            }
        },
        unbind: function unbind() {
            document.body.removeChild(document.getElementById(prevDivId));
            prevDivId = 0;
        }
    }
    

    在需要使用指令的页面引入 js 文件,然后在 directive 里注册指令,就可以直接在 dom 元素上使用了(比如:注册的自定义指令名为 watermark ,使用 v-watermark 就可以),如果需要传入参数,可以将参数对象传入自定义指令(比如:v-watermark=“markObj")。

    展开全文
  • 给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等 实现思路 这里使用的技术主要是canvas,在实现水印的过程中,通过canvas 特性生成 base64 格式的图片文件 使用 canvas 特性生成 base64 格式的图片...

    在这里插入图片描述

    Vue使用自定义指令实现页面底部加水印功能

    项目场景

    给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等

    实现思路

    • 这里使用的技术主要是canvas,在实现水印的过程中,主要使用了canvas的特性
    • 使用 canvas 特性生成 base64 格式的图片文件,然后设置其字体大小,颜色等
    • 最后将其设置为背景图片,这就实现了页面的水印效果

    实现效果

    在这里插入图片描述

    实现代码

    <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自定义指令

    千次阅读 2022-02-13 18:53:09
    除了核心功能默认内置的指令 (v-model和 v-show),Vue 也允许注册自定义指令,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。 二、 如何自定义指令 自定义指令分为全局自定义指令和局部自定义指令 ⭕1...
  • 指令包含复制、指定显示行数、外部点击、防抖节流、element dialog改变大小,拖拽、只可以输入数字、长点击、权限、水印
  • Vue自定义指令有全局注册和局部注册两种方式。 注册全局指令: 通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行Vue.use()调用。 批量注册指令: 新建directives/index.js文件 ...
  • Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...
  • 常见的Vue 自定义指令

    2022-02-22 15:52:14
    Vue 自定义
  • Vue自定义指令

    千次阅读 2022-03-12 09:20:56
    Vue 之自定义指令 Vue 自定义指令有全局注册和局部注册两种方式...在src目录下新建directives/index.js文件import waterMarker from './waterMarker' //自定义水印 const directives = { waterMarker } export defau
  • vue 常用自定义指令

    2022-04-12 22:44:12
    * 自定义指令对象可以接收的钩子函数 * bind 只调用一次,指令第一次绑定到元素时调用 * inserted 被绑定元素插入父节点时调用 * update 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前 * ...
  • Vue自定义指令封装

    千次阅读 2020-12-29 21:46:32
    Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册 自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...
  • vue 指令实现水印效果

    2021-12-16 19:12:15
    vue 指令实现水印效果
  • const LazyLoad = { // install方法 install(Vue, options) { const defaultSrc = options.default Vue.directive('lazy', { bind(el, binding) { LazyLoad.init(el, binding.value, defaultSrc) }, inserted(el) {...
  • vue中如何自定义指令

    2022-02-13 19:42:15
    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 指令使用的几种方式: //会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中 `v-xxx="value"` // -- 将字符...
  • 超实用的全局Vue自定义指令

    千次阅读 2020-12-17 10:29:43
    Vue 自定义指令 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 Vue 自定义指令有全局注册和局部...
  • Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册指令,新建 directives/...
  • 文章目录vue2中如何实现自定义指令vue2与vue3自定义指令对比v-LazyLoad懒加载v-debounce防抖v-throttle节流v-formatter格式化指令v-copy一键复制v-longpress长按v-emoji禁止输入表情和特殊字符v-permission权限vue-...
  • vue自定义指令

    2022-02-13 22:48:44
    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 指令使用的几种方式: //会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中 `v-xxx="value"` // -- 将字符串...
  • 最近看了一篇用 Angular4+ 写的添加水印功能,觉得挺好玩,就自己试着用 vue 写一个相同功能 效果 LIVE ☀️???????????? 在线例子 ????????☃️❄️ 代码 ✈️✈️✈️✈️✈️✈️ 直达完整代码 ????✈️????????...
  • 作者:lzg9527https://juejin.cn/post/6906028995133833230Vue 自定义指令在 Vue,除了核心功能默认内置的指令 ( v-model 和 ...
  • 复制粘贴指令v-copy 长按指令v-longpress 输入框防抖指令v-debounce 禁止表情及特殊字符v-emoji ... 实现页面水印v-waterMarker ...文章转载:收藏这8个非常实用的Vue自定义指令,早点下班 ...
  • Vue(2)之 自定义指令

    万次阅读 2022-01-28 10:27:09
    自定义指令需要注册后才能使用,Vue提供了两种注册方式: 全局注册:Vue.directive(id, [definition]);id:指令名称,[definition]:自定义对象或者函数对象,指令要实现的功能在这个对象中定义。 局部注册:是在 ...
  • VUE常用的自定义指令

    2020-12-15 11:16:27
    基于 vue自定义指令集合,包含 复制粘贴指令 v-copy 长按指令 v-longpress 输入框防抖指令 v-debounce 禁止表情及特殊字符 v-emoji 图片懒加载 v-LazyLoad 权限校验指令 v-premission 实现页面水印 v-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 735
精华内容 294
关键字:

vue自定义水印