今天接到一个给页面增加水印的需求。最开始使用绝对定位 position: absolute + z-index + opacity 方式实现了第一版，可以添加水印，但是鼠标事件的目标总是在水印容器元素上，无法复制水印下面的内容，体验非常差。遂在 github 上找到了watermark-dom包，使用简单，顺利完成了需求。如果只是这样使用轮子，能力永远等不到增长，于是阅读了它的源码，除开一些通用化

在上一篇《vue elementUI组件表单动态验证失效的问题与解决办法》中，讲到直接修改prop属性，未触发form-item的重新渲染，所以虽然有校验*的标志，实际上并不会校验。这是表面现象，最近有了空余时间，去看看了element form组件的源码，找到了根本原因。源码分析在form组件的created钩子函数中添加了el.form.addField和el.form.removeFi...

原因IE10以下报下面的错误：查看详情就会发现是elementUI的ES6语法并未被编译转换成ES5解决办法安装了babel、babel-loader的前提下，在webpack.base.conf.js中相应位置添加如下配置即可{test: /\.js$/,loader: 'babel-loader',include: [resolve('src')...

在系统路由跳转前做权限校验，是经常遇到的需求。本文将使用Vue-Router中的路由守卫功能实现权限控制和加载进度。路由守卫Vue-Router提供了两个钩子函数，分别是前置守卫beforeEach和后置守卫afterEach，其中前置守卫在路由跳转前触发，后置守卫在路由跳转后触发。可以使用下面的方式注册全局路由守卫，当路由跳转触发时，路由守卫按照创建顺序异步解析执行，只有所有守卫resolved

理解插槽及其slot、slot-scope、v-slot特性的使用什么是插槽Vue本身实现了一套完善的内容分发的机制，使用<slot>元素作为内容分发的出口，也就是插槽。插槽内的模板<template>、HTML代码以及组件会被渲染。<!-- Example组件的定义 --><h1><slot></slot>&...

在上一篇《vue elementUI组件表单动态验证失效的问题与解决办法》中，讲到直接修改prop属性，未触发form-item的重新渲染，所以虽然有校验*的标志，实际上并不会校验。这是表面现象，最近有了空余时间，去看看了element form组件的源码，找到了根本原因。源码分析在form组件的created钩子函数中添加了el.form.addField和el.form.removeFi...

在开发过程中，经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件，并进行相应操作，但存在取不到元素的情况，其根本原因是因为$refs只能取得mounted（渲染）之后的元素。例如，在这种情况中，若flag从真值切换到假值取不到节点是正常的，因为v-if如果为假值，那么该节点不会被渲染。但如果从假值切换到真值时，也可能取不到节点，这是因为渲染需要时间，通常可以...

在项目中有一个表单用到的地方很多，所以将其抽出来做成了一个业务组件，通过类型为Object的prop传递数据，在业务子组件中监听该对象prop。但是在开发过程中发现即使使用deep深度监听也无法监听到prop的数据变化，例如下面<!-- 父组件 --><template><div class="hello"><Child :data="...

一、缘由在项目开发过程中，有一个需求是省市区地址选择的功能，一开始想的是直接使用静态地址资源库本地打包，但这种方式不方便维护，于是放弃。后来又想直接让后台返回全部地址数据，然后使用级联选择器进行选择，但发现数据传输量有点大且处理过程耗时，于是又摒弃了这种方法。最后还是决定采用异步的方式进行省市区地址选择，即先查询省份列表，然后根据选择的省份code查询城市列表，最后根据选择的城市列表获取区/县..

一、缘由在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。二、第一次实现与遇到的问题比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下：<template><el-form ref="ruleForm"...