PC端
文章平均质量分 58
PC端功能介绍
是悟能了
公司永远只会为你的苦劳喝彩,为你的功劳付薪!
展开
-
原生JS实现俄罗斯方块源码转载
运行效果源码<!doctype html><html><head></head><body> <div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div> <script> var dom转载 2021-03-24 13:20:31 · 329 阅读 · 0 评论 -
Calendar calendar控件的月份添加点击事件
写在前面elementui在使用日历也就是Calendar calendar控件的时候,发现它自带的上个月、今天、下个月是没有提供点击事件的,但是博主我做业务的时候用到了,因为排班的时候想要获取到上个月的信息需要给月份的信息,所以今天记录一下解决的办法!添加事件在created的钩子函数中实现如下代码this.$nextTick(() => { // 点击上个月 let prevBtn = document.querySelector('.el-cale原创 2021-03-03 11:22:48 · 2236 阅读 · 0 评论 -
vue+element-Table切换页码时被选中状态不变
最近我会更新一些关于less使用的帖子,喜欢的可以一直学习原创 2019-05-16 08:37:30 · 2798 阅读 · 1 评论 -
vue+element-checkbox的全选和全不选的操作实现
需求分析在做一个业务的时候,有一个需求是多个条件进行筛选,全部是checkbox的筛选条件,可以进行任意一个的选择还可以进行全选和全不选,这样进行表格的筛选实现过程原本准备直接使用组件里面自带的方法实现的,但是写的时候发现满足不了,后来分析了一下,数据的格式就知道大概怎么实现了效果预览源码 /** * @check_All_Change 全选操作 */...原创 2019-05-13 20:26:30 · 6062 阅读 · 2 评论 -
vue+element-统一设置请求头的处理(记录main.js)
需求分析我们在做项目的时候,涉及到一个授权的问题,这个其实是一般常见的问题之一,我们的授权是这样做的,很简单,授权登录的时候不需要任何的授权信息,正常登陆就可以了,然后登录成功以后的接口会返回一个授权信息给到我们,写在response里面,那么我们拿到这个新的授权信息之后去请求别的任何的请求,也就是整个系统对于接口的操作都是需要拿到最新的授权信息,那么最新的授权信息是怎么来的呢?其实每一个接口不...原创 2019-05-12 12:57:49 · 4712 阅读 · 0 评论 -
vue+element-根据用户选择的日期重置当前的表头的第一位
需求分析我记得之前我是写过一篇文章,写的是怎么根据用户选择的天数来重置当前的表头数量,那么当时我写的是将天数改变,但是一直没有改变的是开始的日期,我当时写的是没有处理好第一天的日期,所以一直没有更新,那么其实我们既然是需要定制自己的表头的话,开始的日期一般是不会固定的,所以我们今天就简单的写一下怎么根据用户的输入的日期来改变表头的第一天的日期。产品原型源码 <el-date-pic...原创 2019-05-04 13:12:27 · 1338 阅读 · 3 评论 -
vue+element-怎么实现常见的多条件查询
需求分析我们在做项目的时候遇到的比较多就是查询数据,比较简单的是没有任何条件的查询,这样的是最基础的,也是最好做的,一般就是直接一个get方法就可以直接实现了,只需要调一下接口就可以的,稍微复杂一点的就是单条件查询,其实我以前是写数据脚本的,也就是只写一个对数据库的CURD的操作的,那么我是稍微了解一些对于数据库的操作的,那么我们前端需要做的就是将需要的查询条件给到后端,后端通过连接数据库对数据...原创 2019-04-15 23:38:54 · 9031 阅读 · 2 评论 -
vue+element-条件过滤后端返回数据渲染页面
需求说明今天写项目的时候出现了这样的一个问题,就是我们平常做数据交互的时候,直接请求接口,拿到后端返回的数组或者对象直接将table绑定的那个数组接收一个这个返回值就可以了,这也是最简单的一种,但是今天我遇到的是这样的,就是他也是返回一个数组回来,但是呢这个返回的数据是三个tab同时需要的数据,但是是根据不同条件筛选属于谁的,简单的重现一下场景:PS:那么一目了然了,数据1其实需要的是fl...原创 2019-04-13 11:49:40 · 3475 阅读 · 1 评论 -
vue+element-动态设置表头(以时间作为表头)
需求说明我们都知道element提供了table的组件,非常的好用,前面我也写过一些,但是这次的需求是这样的,就是用户可以自己选择时间,自己选择天数,选择以后呢就可以直接生成起始日期为用户选择的,列数是用户选择的天数,那么表头还要显示出对应的星期。这里的目的是为了实现给用户选择会场的时间段,这样可以直接进行选择,也可以一目了然的选择会场的使用情况。(这个功能下面是没有展示使用情况的)效果图...原创 2019-04-06 04:47:31 · 4796 阅读 · 6 评论 -
vue+element-实时获取页面的xy坐标
今天没事的时候自己写着玩想到一个以前喜欢用jQuery写的实时获取坐标的这样一个事情,今天用vue简单的实现一下,因为我的windows在公司,我的mac没有安装node,所以今天的例子是直接使用cdn引入vue来实现的,简单的看一下。我用的hb写的vue,毕竟习惯了,我们今天要实现的是一个鼠标移动的时候可以实时拿到当前鼠标坐标的这样一个事情,大概呢就是这么一个东西:下面看源码:H...原创 2019-03-25 01:01:05 · 4559 阅读 · 0 评论 -
vue+element-路由传递参数
业务场景:我在做一个酒店自助机业务的时候出现这样一个情况,首先是客人入住,那么这个时候客人入住的时候需要选择是有没有预定过,如果有预定的话,那么就直接刷身份证或者输入订单号,就可以查出来预定的信息,那么客人续住的时候也是直接刷身份证,拿到在住信息,客人退房的时候,也同样是刷身份证进行退房的操作,那么这个时候出现了一个比较恶心的情况,就是这三种操作都是需要刷身份证的页面的,也就是这个页面:...原创 2019-03-22 00:07:46 · 4226 阅读 · 1 评论 -
vue+element-组件中的时间怎么计算天数
之前写过饿了吗的时间组件的使用的方法,但是我们实际操作的过程中其实很多的时候是需要根据用户输入的时间来判断他们的时间间隔的,所以今天就简单的写一个可以世界调用的方法用来处理计算中间的天数。不BB,看代码: /** * @DateDiff 计算相差的天数 * @param Date_end 结束时间 * @param Date_star...原创 2019-03-19 13:27:04 · 6716 阅读 · 6 评论 -
vue+element-MD5加密
我们在写vue做登陆的时候,我们一般是不传递明文密码的,所以我们一般都会进行加密处理这个字段,那么其实比较常用的一种加密方式就是MD5加密,如果是常规的写法写js的话,那么MD5加密其实是很简单的一件事,直接就是下载md5的js,引用以后直接使用加密的方法就可以的,这个我之前的博客是有写过的,感兴趣的可以翻一下,今天主要说的是vue怎么进行MD5加密的操作。废话不说 ,看代码我们第一步需要全局...原创 2019-03-06 00:04:17 · 3190 阅读 · 4 评论 -
vue+element-时间组件的注意事项
发布了时间组件的计算日期的方法才发现,日期组件怎使用的忘记发布了,不好意思,这里简单的总结一下怎么使用的,写的很简单,基本就是官方的东西拿来用的,毕竟是官方自己写好的,还是可以使用的。今天简单的说一下时间组件的使用,我在使用的过程中发现的一些我们需要注意的问题,他本身使用起来是很简单的,但是简单的事情也是需要记录的,所以在此大概记录一下!这里只说我们可以用到的,至于说组件的尺寸什么的怎么设...原创 2019-03-19 23:51:21 · 959 阅读 · 0 评论 -
vue+element-表格的分页实现
今天简单的介绍一下element的分页是怎么实现的,先说一下感受,之前一直是使用的jQuery的分页,其实也不全算是,使用的本质还是BootStrapUI的分页,感兴趣的可以翻翻我之前写的文章,有关于这块的,这里就不做任何的赘述,那么说这个原则是用完element的分页以后觉得真的是太简单的,简单的写完甚至没有一点的成就感。不BB,我们看效果和代码!效果:下面我们看一下代码是多简单的:...原创 2019-02-23 16:05:02 · 1318 阅读 · 2 评论 -
vue+element-get和post进行请求传递数据类型(data || params)
最近一直在写vue项目,发现很多的坑是之前没见过的,这是一件好事,毕竟踩坑的过程就是一个学习的过程,往后的一段日子可能更新vue的会比较多,毕竟是在写vue的项目,我写的可能是一些比较简单浅显的东西,但是我毕竟是一个vue的初学者。不是大神,所以会根据自己学到的和用到的一些知识不断的由浅入深的进行推进,高手就当温习,新手就当学习。今天写的是时候遇到一个问题吗,我们的后端出于安全的考虑,我们处理...原创 2019-02-22 00:08:47 · 10747 阅读 · 2 评论 -
vue+element-统一管理线上线下接口
需求分析我们在使用后端提供的接口的过程中,都是先在线下测试结束,没有问题以后才会将代码部署到线上,这样才保证线上的代码是没有问题的。所以如果只有一个接口和一个页面的话,那么是无所谓的, 要不要统一管理都是一样的,但是一旦接口和页面多的话,就会比较麻烦了,所以我们需要统一一个文件进行管理这些接口,这样可以不管是线上还是线下的跑项目,都是可以直接执行的,也不会出现更改过多的问题。实现思路我...原创 2019-06-03 19:08:29 · 1029 阅读 · 0 评论 -
vue+element-购物车的操作
第一种:效果预览思路分析这个其实不麻烦,首先我们被选中的table是属于多选的,也就是说element是提供了一个被选中的行的数组函数的,那么这样我们可以拿到用户是选择了哪些行的,这是第一步,第二步是我们怎么保证每一页选择了以后别的页被选中的选项还在,这个我之前的博客是更新了,这里不说怎么实现的了,也是一个字段就可以了,第三步就是我们将用户选择的数据新加到购物车的那个table里面,第四...原创 2019-07-10 12:58:05 · 2647 阅读 · 3 评论 -
vue+element-项目build打包以后入口文件显示空白的解决方案
现象描述我在准备测试一个项目的时候,需要打包给后端使用, 我打完包以后发现,入口文件,也就是这个文件该文件是直接打不开的,那么我之前是遇到过的,此类的问题,开始是认为是router.js里面的mode改变了导致的,也就是我们在配置路由的时候是可以直接将mode:history的,在路由文件里面,但是我改变以后发现还是不行的,后来百度了以后发现是因为其中有一个文件是不对的,需要我们在配置文件里...原创 2019-06-14 15:52:21 · 4059 阅读 · 2 评论 -
echart拓扑图实现过程
看效果链接地址:官方地址,echart实现源码:首先说一下,实现这个过程很简单,不过坑还是有一些的,今天主要就是说一下这些坑,上面的图是我实现的结果let topology = res.data.items let X = 200 let Y = 200 let dataSource = [{ nam原创 2021-01-21 14:12:23 · 1400 阅读 · 0 评论 -
elementUI中checekBox实现全选和反选以及实现在input中输入空格出现label分割
写在前面为什么写这个呢?两个原因,一个是自己用到了,另一个是压根没人写,我不知道是太简单了懒得写还是很多人都忘记了,不过我看网上找demo的还挺多的,而且天下文章一般抄,都不对还在那不停的抄,我也是醉了,没一点办法,罢了罢了,自己写吧官方DEMO官方全选DEMO全选这里就不实现了,很简单,官方给的有,实现反选这里使用的还是官方的demo,只是添加了一个反选的函数,所以使用的时候先看官方demo源码<el-checkbox :indeterminate="isIndeterminate"原创 2020-10-13 09:28:06 · 686 阅读 · 0 评论 -
vue+echarts 实现两个小例子
echarts来吧,今天写一个关于vue+echarts绘制图表的教程,写的原因很简单, 最近有不少人问,这是其一,其二是我的博客里面没有一片关于echarts的相对比较能看的教程,所以今天就写一篇,我们以折线图和饼图作为例子实现,原因是他们的数据格式相对柱状图来讲比较简单,这个学会了,可以应付绝大多数的图表,当然不包括3D图,虽然echarts支持3D图的绘制,但是这里不涉及,本文主要从几个注意的点说,因为毕竟怎么使用它已经被广大的博友写烂了,这里也就不耽误时间。引入:如果你是vue2.0的版本,引原创 2020-09-18 13:47:57 · 523 阅读 · 0 评论