为了防止用户截屏后传播内容，需要给某些内容背景增加水印。本篇是介绍在Vue项目中增加水印，不添加第三方package，原声代码实现。 先上效果图： 新增 directives.js import Vue from 'vue' Vue.directive('watermark',(el,binding)=>{ function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字体，文字颜色 var can = document.createEl…
项目中使用了quill editor做富文本编辑器，优点是比较简捷，界面也美观，集成起来也很方便，官网地址：https://quilljs.com/ （vue下整合的project: https://github.com/surmon-china/vue-quill-editor）中文文档地址：https://kang-bing-kui.gitbook.io/quill/wen-dang-document/quickstart 不过有个问题，工具栏是英文的，客户希望全部汉化，如图所示： 了解了一番，可以利用css来…
阿里云播放器Alipalayer官方的展示和配置详见：https://player.alicdn.com/aliplayer/presentation/index.html 官方的展示使用的并不是vue的写法，这边整理了了一下vue的写法，如果是配置方面的，可以把配置的代码复制过来直接时候，另外也考虑到了插件组件的使用，也是集成进去了。 示例中使用了2.9.20版本的js和css，使用了ali的CDN引用的，组件使用的是1.0.8的版本，这个是没有CDN的，需要直接从github上下载 https://github…
使用Vant做一个Field，点击Field的前面部分，触发catClicked，弹出Picker选择框；另外右侧使用插槽放置了一个按钮，也可以使用触发里面的addCatClicked方法。 代码如下： <van-field :value="cat" @click="catClicked" readonly placeholder="请选择分类" > <template #button> <van-button size="mini" icon="plus" type="info" @…
iView的Input输入框，希望用户点到输入框的时候，自动全选输入框里内容，方便用户直接输入新的文字内容。 可以使用@on-focus来实现，给on-focus绑定方法，$event.target.select()来全选内容，如下： <i-input v-model="cg.inSh" type="text" @on-focus="$event.target.select()" style="width: 250px;" :maxlength="50"> <span slot="prepend"…
iView中的Input输入框虽然可以限制type="number"，限制只能输入数字（任能输入小数点、+/-号），但是不能满足如下需求： 仅限制输入数字（整数）或者不带小数点，等其他随意限制的情况；另外希望VueJS原生的input也能限制自定义的输入。 我们可以利用@on-keydown监听键盘输入的内容（keyCode），给需要能输入的内容加入白名单，不在白名单中的字符使用event.returnValue = false; 来达到不允许输入目的。 Html代码如下： <i-input v-model=…
VUE项目中，可能需要用到监听路由变化的场景，例如：在Header组件中，需要根据当前的路由，来动态改成Header中的图片或者其他内容。 我们知道vue中使用watch来监听data内容的变化，要如何监听route的变化呢？代码如下 watch: { $route (newRoute) { var path = newRoute.path; if(path === '/login') { this.backgroundImg = require('../assets/home_bg2.jpg'); } else …
iView的表格虽然有了很多定制化的功能，不过有一个需求，官方始终没有实现，那就是表格的分组功能，来看下这个需求，客户想要实现如图的分组功能： 根据时间的不同，按照『今天』，『昨天』，『一周内』，『一个月内』，『更早』，另外根据其他需求的不同，根据其他类别进行分组展示。 虽然官方没有提供现成的解决方案，不过iView表格文档的『特定样式』进行改造，来实现这部分效果。这部分网上查了没有相关的实现，是我自己想出来的，应该算是独家吧，哈哈。 如上图，分组显示的列其实也是普通的一行，只是使用列合并把整行都跨过去了。另外针对…
Vant里面日历，需要设置比如周末是不可选的，默认看文档说明是van-calendar有min-date和max-date两个属性，是分别设置可选的最早日期和最晚日期，不过还是不能满足设置特定的日期不可选这个功能。 经过一番搜索和研究，可以使用:formatter来实现，文档是有提到formatter不过没有具体的示例，来看一下。 <van-calendar :formatter="formatter" :show-confirm="false" v-model="showCalendar" @confirm…
RT Vant的Dialog对话框，有个需求，就是按确定的时候，我们可能是请求后端的API，但是后端可能返回不成功，这个时候，就不应该关闭对话框了。 Dialog有个属性是before-close可以在这里面阻止对话框的关闭。 例如： <van-dialog v-model="showIdCardDialog" :before-close="saveIdCardClicked" title="身份证号" show-cancel-button> <van-field v-model="idCard"…
