- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 el-table固定头部设置height后第一次进入页面无法出现滚动条的问题
只需要设置el-table__body-wrapper类就行了，如下。
2023-08-08 14:12:36
383
原创 C3制作反向旋转及光效动画
写了一个demo关于制作反向旋转及光效动画，以此为总结：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
2020-03-16 10:40:35
507
原创 关于localStorage的使用
使用localStorage存储数据： localStorage.setItem("key", "value"); 或者 localStorage.key = "value";使用localStorage获取数据：localStorage.getItem("key"); 或者 let aa = localStorage.key;使用localStorage删除数据： localStorage....
2020-03-04 17:41:57
340
原创 关于H5移动端的一点小总结
最近我们开发了一个招聘系统，一周时间同时上线PC端和移动端，我的个天啦!累的不行，还好团队配合的非常好，不像上家公司那傻X需求、主程老是为了自己一点利益勾心斗角的（只能在心里问候他们全家，祝他们生孩子没屁眼）。现在为这个移动端招聘系统做一个小总结： created () { this.baseVal = 750; // 750为移动端UI图的宽度，即750px;...
2020-03-04 15:10:02
424
原创 elementUI el-table中的selection实现单选+全选框换成文字
1、首先我们把全选框换成自己想要的文字：这里有使用header-cell-class-name属性给表头添加自定义class， <el-table height="100%" ref="tables" v-loading="dataLoading" :data="dataList" @select="handleRow" :header-cell-...
2019-12-27 14:19:56
7511
原创 使用cookie实现记住密码功能（由于存在安全性，限内部系统使用）
最近在做一个记住密码的功能，如果使用cookie实现该功能的话，一定会存在安全隐患，大家都知道保存在浏览器的密码都能看到，还好我们系统是内部使用，部署在局域网，这样就没有疑虑了。具体dome如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2019-12-27 10:05:04
1001
1
原创 本地文件如何调试cookie，个人经验分享！
最近在测试记住密码这个功能发现bug，由于后端使用的是CAS，所以只能本地调试。一开始浑然不知cookie只能存储服务器的页面上的数据，使用vscode作为开发工具，它不像webstorm一样一打开页面就是localhost:8080之类的地址，而是文件路径的地址，类似于这样：file:///D:/works/test.html的。那么如果你使用vscode开发调试cookie首先要解决的就是启...
2019-12-18 11:37:07
1721
原创 elementui在ie9浏览器下的兼容性问题及解决方法
1、el-select组件内在IE9中会出现下图样式错乱，解决办法：//select框固定下拉箭头兼容ie9.el-select.el-input.el-input__suffix.el-icon-arrow-up{-ms-transform:rotate(180deg)\0;}2、IE9中elementui的message提示框会出现样式错乱，解决方法：...
2019-10-29 19:38:54
15003
2
转载 vscode 汉化
如何快速实现vscode汉化：https://blog.csdn.net/weixin_38883338/article/details/88674700
2019-08-15 10:45:18
910
原创 个人理解this.$nextTick()的使用场景
最近有在一个老项目的html页面中使用vue和echarts，点击按钮后需要重新渲染echart图标,但是echart却报错：Can't get dom width or height。可以很清楚知道是由于echarts获取不到宽度和高度，我试过使用this.$refs来过去元素的宽高，但还是失败了，所以，我觉得还是dom渲染问题，那么此时快速的解决办法就是使用this.$nextTick()方法...
2019-07-16 16:14:22
44660
1
原创 js中的var，let，const的区别
js中最熟悉的莫过于是var，这也是我们使用最多的，我们常用这个来声明全局变量，并且可以多次赋值，但是这也容易使定义的变量被污染：1.先说下var：var a = 1; //此处声明的变量a为全局变量function test(){ var a = 2;//此处声明的变量a为函数foo的局部变量 console.log(a);//2}test();console.lo...
2019-05-29 23:05:20
359
2
原创 VS Code 的常用快捷键和插件
VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释： a)单行注释：[ctrl+k,ctrl+c] 或 ctrl+/ b)取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u) c)多行注释：[alt+shift+A] d)多行注释：/**2、移动行：alt+up/down3、显示/隐藏左侧目录栏 ...
2019-05-24 14:21:22
309
原创 关于页面没有刷新，bus.$on()被多次绑定的解决办法
最近在工作遇到问题，发现bus.$on中的函数被多次触发，查阅资料发现，原来是页面没有刷新导致bus.$on被多次绑定的缘故，解决办法也很简单，就是使用bus.$off解绑，具体示列如下：bus.$emit('eventname','') // 触发bus.$off('eventname') // 页面没有刷新先解绑bus.$on('eventname',()=>{ ...
2019-05-23 16:50:53
967
转载 element ui 实现table序号递增
element ui 实现table序号递增：(page - 1) * pageSize + scope.$index + 1 // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1应用：<el-table-column label="序号" type="index" width="40" ...
2019-04-23 19:28:04
13026
3
原创 使用v-chart报错 Uncaught Error: series.type should be specified.的解决办法
最近使用vue进行开发，需要做大量的图表，看到图表首先想到的是echar神器，而v-chart是对echart进行vue的封装，使用自然简单的多，当我使用v-chart的extend属性的时候居然报错Uncaught Error: series.type should be specified,这句英文的意思是‘应指定series.type’，但是我是按照官方文档来的，当我把数据写死后就不报错了，...
2019-03-29 16:51:25
17715
3
原创 rem的使用
普通设置rem1.先设置屏幕尺寸的动态变化<script> /* 设置rem单位*/ function setRem(){ var w=document.documentElement.clientWidth; document.querySelector('html').style.fontSize=w/20+'px'; } setRem();...
2019-02-21 20:04:28
655
原创 VUE中组件和组件的通信
前面我们说过父组件和子组件的通信，子组件和父组件的通讯，那么子组件和子组件是如何通信的呢？这个时候我们要想到使用bus这个变量来解决问题了。先定义一个全局变量：import Vue from 'vue'let bus = new Vue()export default bus子组件向另一个组件传递数据：abcUnread() { this.apiGet(...
2019-02-21 19:59:44
457
原创 vue实现阻止冒泡以及jQuery实现阻止时间冒泡的方法
在工作中总是能遇到冒泡事件，总是会影响其他方法的使用，那么下面就简单说说阻止时间冒泡的方法吧！千言万语不如直接上代码清晰明了： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue </title> <
2019-02-19 18:51:51
898
原创 使用vue＋elementUI页面实现前端做分页
当数据不是很多的时候，后端会要求前端来实现分页功能。那么下面讲下怎么使用element来实现前端做分页功能。由于功能比较简单，那么就直接上代码：// 计算当前页面的数据tableList() { // this.displayData是当前页面要显示的数据 this.displayData=[] for ( // pagesize是当前页面要显示...
2019-02-18 18:48:25
5551
原创 vue实现数字滚动效果并匀速滚动
最近有一个需求就是：要求显示两个数之间的匀速滚动效果。一开始我是直接从网上找了一个插件，但是这个插件并不是匀速滚动的，这就导致当页面刷新后显示的数字不是刷新之前的，这样肯定不行啊，那么我们就思考将24小时分成若干等份来计算，下面直接贴代码： // 滚动效果数值计算 getTimeDatas(start, end) { console.log(start, end, 96...
2018-12-03 16:38:58
10356
原创 js实现将时分秒转化成毫秒，将秒转化成时分秒
由于功能比较简单，那就直接上代码吧！// 时间转为毫秒 timeToSec(time) { var hour = time.split(':')[0] var min = time.split(':')[1] var sec = time.split(':')[2] var s = Number(hour * 3600) + Number...
2018-11-30 14:59:14
8695
5
原创 非常好用的vue数字滚动插件vue-countTo
最近需要开发一个数字滚动效果，这让我首先想到的是vue-countTo，之前有看过相关一篇博客，觉得这个插件还不错，今天刚好用上，那么就简单说下这个插件的使用：vue-countTo是一个无依赖，轻量级的vue组件。你可以设置 startVal 和 endVal，它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;安装：npm install...
2018-11-29 16:46:25
23594
2
原创 教你如何在组件中使用vue-seamless-scroll无缝滚动组件
最近因为需求需要写一个公告组件，这就需要使用无缝滚动插件，在网上搜了一下，看到大家的一致好评就果断的使用了vue-seamless-scroll组件。下面就简单的介绍它的使用，具体详细的使用推荐大家去看下开发者文档。安装：npm install vue-seamless-scroll --save引入组件：import vueSeamlessScroll from 'vue-seamle...
2018-11-28 17:52:43
17227
25
原创 ubuntu系统中修改hosts配置
最近在使用ubuntu开发,难免需要配置hosts，下面介绍以下使用命令进行配置的操作流程。ubuntu下配置host的方法：打开终端输入命令：sudo vim /etc/hosts，在vim中进入插入模式(需要点击insert按键)，插入要配置的host地址，按ESC键，调至命令模式，按住 shift+; 键，输入wq,再按回车键，便配置成功了host地址;修改 hosts 后,使 ho...
2018-11-28 16:20:52
11244
3
原创 谈谈如何使用flex进行弹性布局
关于布局大家在开发的时候应该有很深刻的感受吧，好的布局可以事半功倍，而差的布局则是事倍功半。so, 布局可以影响整体的开发速度。那么现在我就简单来说说常用的flex弹性布局：flex总共有12个属性，６个用于父元素，6个用于子元素。咋一听大家觉属性有点多，没错！我也这么觉得，其实常用的也就6个左右，大家记住常用的就可以了。① 给父容器添加display: flex/inline-flex;属性...
2018-11-21 12:12:26
307
原创 vue中destroyed方法的使用
我们从destroyed的字面意思可知，中文意为是“销毁”的意思，当我们离开这个页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，我们常用来销毁一些监听事件及定时函数，例如：// 销毁监听事件destroyed() { window.removeEventListener('resize', this.resizeWin)}从上函数可知，当用户离开页面的时候便会销毁...
2018-11-19 14:37:30
104497
原创 关于element DatePicker 日期选择器为什么赋值不成功的解决办法
最近在使用 DatePicker 日期选择器时，发现再次给DatePicker上的model赋值出现不成功的情况，但是一开始进入页面的时候在created中调用方法却能够赋值成功，这是为什么呢？疑问油然而生，经过浏览器后台打印，发现model上是有值并且是正确，这个时候我便想到了 this.$set( ) 函数，这个方法专治数据视图不同步更新问题，使用该方法后问题便轻松解决。关于this.$set...
2018-11-08 21:18:44
23222
1
原创 说说vue.set() (this.$set) 的用法
这段时间工作上经常操作数组数据，并且要求实时更新视图数据，这个时候首先想到的是 vue.set() 方法（注：当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。），该方法的使用首先要在页面引入vue,应该这样写：import Vue from 'vue'，这样才能在组件全局获取到vue这个实例对象。如果你觉得引入麻烦，推荐使用vue.set的别名this.$set。那么...
2018-11-02 16:59:01
48979
3
原创 什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？
有时候我们经常分不清什么是父组件，什么又是子组件。现在来简单说下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。以上是我个人的理解含义，那么现在就直接上代码吧！子组件：<template> <div> {{msg}} </div> <p>{{he...
2018-10-30 18:42:57
23456
4
原创 如何在VUE框架中使用ztree插件
一切还是以需求为导向！如下图所示：这是要求作出的效果。经过我综合考虑发现ztree插件与需求契合度比较高，所以果断的使用了该插件进行开发。简单说下需求：管理目录层级有四个子菜单，可以新建父目录和子目录以及对目录进行相关编辑操作。相信大家遇到的第一个问题就是如何使用ztree插件，没错！那自然要跑到ztree官网去看文档，熟读文档是必不可少的！读完文档后，那怎么在vue框架中配置ztree...
2018-09-26 21:40:30
16323
8
原创 非常好用的VUE时间过滤器，快速将时间生成你想要的格式！
//元素的补零计算 function addZero(val) { if (val < 10) { return "0" + val; } else { return val; } }; // conso...
2018-08-06 20:21:53
2058
原创 rem在网页布局中的应用
在做网页的时候经常要考虑到屏幕的尺寸，以往我们都是使用百分比来适应屏幕的大小，但是这样经常用于改变盒子的宽度，而盒子的高度是保持不变的，看起来就极不协调，那么有没有根据屏幕大小进行等比缩小的方法呢？答案是有的。说下我在一个VUE项目中的解决办法吧，样式是使用scss来编码的，浏览器的默认字体大小是16px,所以综上所述可得：@function w2h($size) { @return $...
2018-07-20 18:17:06
283
原创 抛弃for()循环遍历数组吧，使用forEach()函数或$.each()更方便!
通常我们在遍历数组的时候都喜欢使用for()循环，这样就会有一堆代码，还得申明变量，现在是时候改变下了。那就尝试下forEach()函数，而且forEach()是支持原生JS的，所以不受框架限制。那么现在就来说说这个方法：forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。这是官方的解析，事实也是这样的，哈哈，举个栗子：<button onclick="number...
2018-07-20 15:17:29
564
原创 关于浏览器自动填充账号和密码引起的Bug
最近在项目中遇到过浏览器自动填充账号和密码引起的Bug。先来说下项目的经过：我的另一位童鞋在做登录模块的时候，登录按钮默认就是禁止点击的状态，如果账号密码都没有输入，那么登录按钮也是处于禁止点击的状态，所以当浏览器保存账号和密码后bug就来了。当进入登录页面后，浏览器自动填充账号密码，然而按钮还是处于禁止点击的状态（实际是可以点击的），但是代码还是做了处理的，当账号和密码输入框的值不为空就会自动解...
2018-07-18 16:29:29
4990
原创 在VUE项目使用ajax下载excel表的做法
以往我们都是使用一个标签直接打开URL地址进行下载，但是在某个VUE项目中我遇到后端PHP要求使用GET请求进行下载的excel表，由于是第一次遇到这样的需求，有点不知所措。所以就立马百度一下，哈哈，网上还有不少大神遇到过这样的需求，还真被我找到了。但是每个项目都有自己不同的需求，我们可以参考别人的然后进行相应修改，以下是我在项目中写法：//这个是请求接口数据export const e...
2018-06-28 16:59:21
5771
2
原创 vue 搭配element UI的项目中如何做input框只能输入正整数的验证
有不少童鞋在使用element ui的vue项目中不知道如何做验证，如果直接在element ui上写keyup事件会报错，这是因为element ui会默认自动在元素的上层封装一个div，这样我们写的keyup事件实际是写在div上，所以会报错。那么就说说解决办法，首先我们可以使用最简单的办法解决报错，那就是在keyup后面直接加.native就能解决了，写法：@ keyup.native ; ...
2018-06-28 16:04:21
43066
5
原创 聊一聊函数join(),split(),substring(), splice()的用法
由于工作中经常有用到这几个方法来处理数据，而且经常分不清楚这几个方法的用法，因为他们长得太像了，哈哈哈，很容易搞混的。我觉得有必要做个总结，接下来就说说这几个函数的用法：1、join() 方法用于把数组中的所有元素放入一个字符串，这是官方的解释，说白了就是将数组转化成字符串，这是我们最常用的做法，而join的中文意思是“加入，链接”，我们就记住将数组加到字符串里面去了，还可以用指定的符号来连接数组...
2018-06-14 19:03:14
552
原创 vue项目中如何简单的读取声音文件
我们项目现在有这样一个需求，通过select元素来选择音频文件的名称，点击按钮可以进行试听。话不多说，直接上代码：HTML：<div class="testVoice"> <p class="p-title">提示声音:</p> <el-select v-model="valueOpt2" placeholder="请选择&
2018-06-06 18:06:32
8899
原创 ubuntu系统下安装webstorm流程
1.官网下载地址：http://www.jetbrains.com/webstorm/download/#section=linux-version2.将安装包解压，进入安装包文件目录bin，启动终端，输入命令：sh webstorm.sh ，将其启动，启动后右键将其固定在左侧的导航栏;3.webstorm破解，可以使用时间破解法；4.将webstorm汉化：只需将文件resources_cn....
2018-06-06 14:13:43
1347
原创 vue项目中使用ref来获取dom及给class绑定属性的命名注意事项
使用ref来获取dom的时候，在给ref命名的时候尽量使用驼峰命名法，不能使用'-'（像‘auto-play’这样的命名就是错误的，应该改为'autoPlay'这样）；而在给class绑定属性的时候，也应该避免使用'-'。例如， :class="{audit-btn:isBtn}" 是错误的，正确的写法是:class="{auditBtn:isBtn}"...
2018-06-04 20:43:23
26767
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人