需求 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除 效果 如上图 在body节点下插入水印DOM节点,水印节点覆盖在页面最上层但不影响页面正常操作 在通过js或者用户通过开发者工具删除或修改水印节点时自动复原 原理 通过canvas画出节点需生成水印的文字生成base64图片 生成该水印背景图的div节点插入到body下,通过jsMutationObserver方法监听节点变化,再自动重新生成 生成水印DOM节点 /

在Excel中没有直接添加水印的功能,但依旧可以通过一定方式来实现类似水印效果.本文通过Java程序代码介绍具体实现方法.可添加单一水印效果,即水印是以单个文本字样来呈现:也可添加多个平铺水印效果,即水印是以多个文本字样来页面中平铺.详细内容见下文. 程序环境: 测试文档:Office Excel 2013 编译环境:IntelliJ IDEA 2018 JDK版本:1.8.0 Excel库:Java系列free spire.xls.jar 3.9.1 Java代码 1.单一水印效果 impor

vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.title}}</h1> 虽然,a的数据已经被修改成功,但是页面并不能动态更新 需要使用,以下这种方式去更新 this.$set(a,'title','列表2'); //或者 Vue.set(a,'title','列表2'); 2.数组更新 同理: ,,,]; tihs.arr[]=; <spa

首先引用warterMark.js,内容如下 'use strict' var watermark = (className,str,type) => { let dom = document.getElementsByClassName(className) let canvas = document.createElement('canvas') let cxt = canvas.getContext('2d') let div = document.createElement('div')

设置默认属性ct_month: null 方法: //默认显示今天getdatatime(){ this.ct_month= new Date(); }, //默认显示昨天getdatatime(){ this.ct_month= new Date(); this.ct_month.setTime(this.ct_month.getTime() - 3600 * 1000 * 24);}, //默认显示上周getdatatime(){ this.ct_month= new Date(); thi

之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过打印项的层级关系,图片在下层,文字在上层,对文字后面进行背景平铺.关于层级,可查看本博客另一篇相关博文:Lodop调整打印项输出顺序 覆盖与层级. 上面的第一个链接博文,中是用图片作为底图进行平铺,上面是add_print_text纯文本,由于lodop中的纯文本本身就是无背景色的,所以可以看到下方

Word中设置水印效果时,不论是文本水印或者是图片水印都只能添加单个文字或者图片到Word页面,效果比较单一,本文通过Java代码示例介绍如何在页面中添加多行图片水印效果,即水印效果以多个图片平铺到页面.(添加多行文字水印效果,可以查看这篇文章中的方法) 思路及方法:获取Word页眉,添加图片到页眉段落,并复制图片. 程序环境:使用spire.doc.jar,版本:3.9.0 Java代码: import com.spire.doc.*; import com.spire.doc.documen

在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMount //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inse

好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这时就要用到"ref"了, 1.什么是ref引用, ref用来辅助开发者在不依赖与jQuery的情况下,获取DOM元素或组件的引用 每个vue中的组件实例上,都包含一个$refs对象,里面存储着对应额DOM元素或组件的引用. 默认情况下,组件的$refs指向一个空对象. 好了,现在我又要开始

知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐标 设置地图标注 2.代码:map.js (ps:申请百度地图密钥和引入百度地图API,请参考我的另一篇博客:Vue中使用百度地图——根据输入框输入的内容,  获取详细地址) <template> <!--地图容器--> <div id="XSDFXPage"

vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 <div class="form-group"> <label class="col-sm-2 control-label">所属课程</label> <div class="col-sm-10"> <

黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原方式的优势有可以使用三元表达式 1.vue中class样式绑定方式的相对于原方式的优势? 可以使用三元表达式:h1 :class="['thin', 'italic']" h1 class="red thin" 2.vue中class样式绑定中 三元表达式及对象替代三元

问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它在项目中会存在多个实例.如果data属性值是一个对象时,那么它所有的实例都会共享这些数据,这是很麻烦的事情,你不能确保你的所有实例中的属性值都不会重复. 我们的期望是,组件的每个实例都能独立的维护自己的数据. 解决方案 我们都知道,在JavaScript中,函数具有独立作用域快的特点,外部是无法访问

1.如何在前端vue中隐藏某一个元素(el-form-item怎样隐藏) 给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏 <el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="u

http://www.qumake.com/articles/2011/04/18/1303094833690.html ———————————————————————————————————————————————————————————————————————————— 在Substance6之前, skin 有一个withWatermark 方法来设置皮肤水印. try{        SubstanceImageWatermark watermark = new SubstanceIma

前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的.

Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布通知,实现视图的更新. 1.在vue中$option.data中定义的数据是都是响应式的,在初始化生命周期的时候就已经实现了数据双向绑定,通常在view中只是用一个表达式语句,当绑定时的逻辑比较复杂是可以通过计算属性的方式实现.但是在computed中定义的属性只具有get方法,

一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name="fade"></transition> v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效,在 transition/animation 完成之后移除. v-leave: 定义

基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3C标准. CORS跨域的特点:它需要服务器的‘配合’.就是说,它的实现是:浏览器(所有浏览器和IE10+)+服务器. 一般情况下,我们可以在请求头信息中加入Origin,来告知服务器自己来自哪个源:协议 + 域名 + 端口.如果Origin域名在指定许可范围内,则服务器的响应头会多出三个信息: Access-

前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向绑定的的用法, 于是决定写一篇文章, 再次总结下“Vue中的父子组件通信”. 前面提示:本文文字略少,代码略多 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 主要谈谈2中情景的实现,

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =