![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目笔记
杜都督丶
前端狗
展开
-
[学习笔记]vue密码强度判断
老规矩,先上效果图:(方便演示,input中type改为了text)判断规则用了这个https://blog.csdn.net/Ylxin/article/details/7725784前面评分规则差不太多,后面评分等级作了修改:小于10:密码强度不合格,10-25:弱,25-35:中,35以上:强 <div class="passwordstrength"> <div class="level1" :style="{'.原创 2021-08-05 11:35:32 · 1450 阅读 · 0 评论 -
[学习笔记]vue右键在新标签页中打开链接
客户需求:tab标签点击右键时,需要有打开新标签页的选项。原本的tab标签用的element组件el-tab,因为渲染之后是div,所以不会有打开新标签页的选项,带有href的a标签才会有这个选项。而标签的内容又是在el-tab-pane的label里定义的,不是很好改。最后通过获取鼠标右击事件来动态添加a标签,从而使得右键菜单支持打开新标签页。用到了@contextmenu <el-tabs v-if="info != null" :value="cu原创 2021-06-29 15:58:06 · 2741 阅读 · 1 评论 -
[学习笔记]使用jsPDF和autoTable导出多个表格的pdf
需求:有多组数据,需要在同一个pdf里放入多张表格autotable工具:https://github.com/simonbengtsson/jsPDF-AutoTable一、安装jsPDF和autoTable并引入安装:可以选择cdn或引js,我直接用npm装了,方便快捷npm install jspdf --savenpm install jspdf jspdf-autotable引入:import JsPDF from "jspdf"import 'jspdf-au原创 2021-04-28 17:16:39 · 1357 阅读 · 0 评论 -
[学习笔记]vue input输入框输满或清空自动切换下/上一个输入框
应用场景:一般使用在输入生日、银行卡信息等场景。效果图:html: <input type="text" placeholder="1980" @keyup="nextinput" @keyup.delete="backspace" maxlength="4" v-model="userinfo.birthday.y.原创 2021-03-17 16:40:11 · 1111 阅读 · 0 评论 -
[学习笔记]vue实现页面滚动到某一位置时,div以动画出现
效果图:实现方法主要分两步骤:1.监听滚轮,判断div何时出现2.插入动画效果首先,在mounted钩子内监听进度条滚动window.addEventListener("scroll", this.handleScroll);当进度条滚动后,执行handleScroll事件,然后就可以进行判断了 handleScroll() { this.currentScroll = window.pageYOffset //表示当前滚动的位置 if (原创 2021-03-11 16:28:19 · 8345 阅读 · 13 评论 -
[学习笔记]element走马灯Carousel组件自适应高度
官网给的例子是<el-carousel height="150px">,高度写死的话,不会自适应屏幕宽度,banner就会被挤扁,尤其是pc切换到移动端效果最为明显。因此,给高度设置变量 <el-carousel trigger="click" :height="screenwidth"> <el-carousel-item v-for="(item, index) in banner" :key="index">原创 2021-03-02 13:35:34 · 5897 阅读 · 0 评论 -
[学习笔记]利用sass循环解决移除hover时z-index变小而置于下层的问题
项目需求:有从周一至周日的排课列表,当鼠标经过某一课程时,显示该课程的边框和详情(下简称详情),效果如下:因为这个详情是课程item的子标签,所以给详情设置z-index没有用,因此在hover时,我给该课程item的z-index提高,就可以实现目前选中的课程和详情的层级要高于周围课程的层级。按理说这样就结束了,但是当我添加了transition动画效果,就出现了另外一个问题。可以看到,当鼠标移开选中的课程时,详情瞬间被压在其他课程底部。这是因为移开鼠标时,其他效果可以受到tran原创 2021-02-09 14:40:09 · 356 阅读 · 0 评论 -
[学习笔记]本地获取图片并利用cropper.js裁剪图片
a原创 2021-02-03 16:29:46 · 632 阅读 · 0 评论