
前端
文章平均质量分 73
Connie_豆
一个开始活在脱发恐惧中的“伪”程序媛……
伴随着发量的减少还有健忘……
看过的东西不去温习的话经常忘记,希望在这里把学习到的东西都记录下来。
这个号有了很久了,但是最近才开始记录,因为之前习惯用印象笔记,后续希望自己不要犯懒,慢慢把印象笔记上的东西搬过来
男朋友也是程序猿,希望他良心发现,记得过来给我点赞(抠鼻抠鼻)
展开
-
css filter改变图片的颜色,神奇的操作~
最近get了一个神奇的知识~视觉设计的小姐姐某天有一个想法,她只设计一版图标,需要前端在不同的场景展示不同颜色的图标,确实是高效的办法哈!但是对我的CSS知识来说超纲了[捂脸]…于是开始搜搜搜,发现了一些办法,而且这些办法都是使用filter这个神奇的属性!一、filter:drop-shadowdrop-shadow滤镜可以给元素或图片非透明区域添加投影,对于背景透明的icon来说,投影当然就可以实现改颜色啦!html:<div class="imgBox"> &l原创 2020-12-08 19:57:52 · 8009 阅读 · 0 评论 -
vue+vuex封装移动端三段布局组件(head、content、foot)
vue封装的移动端布局组件(head、content、foot)原创 2020-12-03 16:50:39 · 1578 阅读 · 0 评论 -
【转】javascript的执行环境和栈&内存管理
前几天看到了一篇讲js执行环境和栈的文章,真的非常好,通俗易懂,原理描述讲的非常清楚,很适合从来没有接触过js底层的小伙伴们看~~今天想温习一下就翻出来了,考虑到自己的老人记性,还是写篇文章tag一下比较好……大多数时候确实是知其然不知其所以然,在忙着吭哧吭哧码代码的时候确实需要留出一些时间了解一下偏原理的知识,可以使我们写代码出现莫名其妙预期外的结果的时候有新的思考方向和思路。作者很...转载 2019-02-26 10:16:28 · 177 阅读 · 0 评论 -
【小tips】vue+iview,动态计算table高度,保证页面无竖向滚动条
一、场景这是一个常规的后台管理系统的网站界面:(orz……怎么拉伸成这个样子……)我个人看这种界面的时候,是非常不喜欢竖向出现滚动条的,像搜索区域、工具栏这种固定的区域我希望是不动的,只需要拖拽表格的滚动条就可以看其他数据(就像上面的截图)。二、解决思路:header、面包屑、页码器 的高度是固定的; 工具栏和搜索区域是不固定的,因为具栏在一个操作权限都没有的时候是...原创 2019-03-28 15:36:35 · 3518 阅读 · 1 评论 -
javascript中对象的constructor属性有什么用?
刚刚突然想起来前段时间被问的一个问题:为什么实现继承时如果使用了 Child.prototype = Parent.prototype;为什么还要执行:Child.prototype.constructor = Child?不执行可不可以?于是我答曰:“如果不加上设置constructor属性的代码,那么Child实例的构造函数就指向Parent”;被反问:“那会有什么影响呢?那这...原创 2019-04-12 15:14:27 · 2413 阅读 · 0 评论 -
nginx二次反向代理
之前有写过nginx部署vue项目:vue项目部署至nginx&踩坑记后续的工作中遇到一个场景:前端工程打包之后部署在服务器B的nginx上,为了发布工程到外网,需要配置外网的nginx A服务器,新增一条代理规则指向B服务器,特此记录一下配置最少的一种方式;1. A服务器配置:server { listen 18080; se...原创 2019-09-02 19:21:41 · 7474 阅读 · 0 评论 -
【组件推荐&改造】基于element-ui 实现的iview风格tree组件
由于iview的tree组件API比较少,加上项目的需要iview的tree组件并不能完全的实现我想要的效果,于是就在网上找了一圈,发现了某位大佬改造的tree组件(https://www.npmjs.com/package/chu-tree-iview)。 这个组件将element ui的tree组件改造成iview风格的,当时使用的时候是基于element ui...原创 2019-10-01 12:03:26 · 827 阅读 · 0 评论 -
【组件推荐&改造】vue实现的tree grid 树形表格
因业务需要,我需要一个树形表格,类似这样的:然而iview中的table是这样的:其实,准确的来说,iview中的表格并不是树形表格,只是用于展开显示每一行的更多信息;在网上找了一圈,发现有位大佬用vue封装的iview风格的树形表格(vue-table-with-tree-grid),在此基础上我又进行了一些调整和优化:1. 增加节点图标;2. 可以自定义展开的节点;...原创 2019-10-01 15:16:50 · 2074 阅读 · 1 评论 -
axios下载excel踩坑记录(导出Excel总是报格式错误而且乱码)
项目需要,有一个功能是后端生成Excel文件并且写入文件流,前台接收并提示用户导出文件。看起来是个很简单的功能,网上关于这个功能的解决办法也有很多,基本都差不多,大致如下:后端:@RequestMapping(value = "/exportGatherXls", method = RequestMethod.POST) public void exportGatherXls(Ht...原创 2019-10-09 14:41:34 · 3568 阅读 · 1 评论 -
iview表单验证number的一个坑(async-validator)
其实说起来这也不算是一个坑,只能说因为number校验比较特殊。今天做表单验证需要做一个验证:判断输入的必须是金额(数字),而且不能为空。于是毫不犹豫的我这样写的:<FormItem label="Money" prop="money"> <Input v-model="formValidate.money" placeholder="Enter your ...原创 2019-02-25 11:07:15 · 9431 阅读 · 4 评论 -
vue-router 复用组件如何设计路由
因为项目的需要,有两个界面长得几乎是一模一样的,因此决定采用路由组件传参的方式使用同一个组件官方文档路由组件传参示例:const User = { template: '<div>User {{ $route.params.id }}</div>'}const router = new VueRouter({ routes: [ { path:...原创 2019-10-01 17:10:00 · 435 阅读 · 0 评论 -
vue+iView 引入iconfont
iView本身的图标不是很多,所以在选择图标的时候翻出了收藏了好久的iconfont~iconfont是阿里出品的开源图标库,有非常多的图标,兼具美观和全面,非常适合找图标~网址:iconfont官网一、引入单色图标1. 新建项目 2. 选择喜欢的图标加入购物车,将鼠标放在喜欢的图标上面就会显示菜单。3. 将购物车的图标加入项目;点击右上角的“购物车”按钮弹出...原创 2018-09-28 17:01:01 · 8543 阅读 · 0 评论 -
解决iview菜单使用iconfont图标无法显示的问题
写在前面:首先,我出现问题的场景是使用在导航菜单上,即 Menu Item;其次,我是使用json文件递归生成的菜单列表,在meta属性中设置的icon; 今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框使用方法和设置Button的图标是一样的,检查了好久也没有发现问题,百思不得其解……使用F12检查元素,发现原来框架是在样式前面加上了 iv...原创 2018-09-28 17:14:31 · 20076 阅读 · 7 评论 -
修改巨人的npm包 & 如何用npm上传、更新自己的包
其实刚刚从传统前端+后端转到现在主流的node,前后端分离,vue三个月不到的我,其实还没有想过自己会写包上传到npm给大家使用……契机来源于,我下载了一个别人写好的基于vue实现的tree grid包,但是我需要修改一些样式,但是下载下来的在node_modules的源码直接改是没有用的,参考了网上的一些文章,总结一下如果出现这种需求的话怎么处理~1. 在npm官网,包的介绍...原创 2018-10-15 15:31:27 · 2377 阅读 · 7 评论 -
【iview】如何设计一个可以搜索的菜单列表
一、场景 最近在做的某系统,菜单非常多,系统本身业务比较多,再加上十好几张报表,导致整个菜单列表非常长,用户在找的时候非常的不方便,于是便想着给菜单列表加上搜索功能,先瞧一下效果,从左到右分别是:未搜索,搜索,折叠 二、实现思路MenuList设置成计算属性,根据搜索框的值过滤菜单列表,实现思路是比较简单的,但是有一...原创 2018-10-27 17:04:19 · 2412 阅读 · 3 评论 -
vue+iview 封装类似easyUI表格组件(数据表格+页码)(列配置支持slot啦)
一、场景在使用iview的时候发现表格和页码组件是分开的,我之前使用的UI组件库如easyUI和miniUI,它们的组件库是类似这样的:只需要提供数据和数据总条数就可以渲染出表格+页码+描述,因此萌生了包装一个这样的表格组件;必然会有考虑不周全或者可以优化的地方,在开发这一个月来陆陆续续修改了几次,目前看来可以满足大多数情况了~先看一下实现的效果:二、实现细节...原创 2018-11-06 09:54:02 · 1830 阅读 · 5 评论 -
vue+iview项目webpack打包报错:Unexpected token: punc (() / punc (>)
昨天第一次尝试打包,因为用的是vue-cli,所以直接执行npm run build就可以了。但是执行完成报错了:ERROR in 0.866cdedf48bcb07fd685.chunk.js from UglifyJsUnexpected token: punc (() [0.866cdedf48bcb07fd685.chunk.js:1173,13]ERROR in 1.866...原创 2018-11-13 14:35:24 · 1738 阅读 · 3 评论 -
vue项目部署至nginx&踩坑记
1. 前言 在本地吭哧吭哧的写了两个星期,终于到了需要部署到服务器供测试的时候了!! 初始的设想是部署到tomcat,放在ROOT目录下,即可以使用 域名:端口/ 访问,但是涉及到后台请求跨域了,百度+咨询前同事,得出了结论:通过nginx反向代理,实现请求路径映射到目标后台服务器; 此外,nginx本身可以作为静态资源文件服务器,还可以省去...原创 2018-11-22 10:26:56 · 3583 阅读 · 0 评论 -
关于Cookie和Session的失效时间点
1. Cookie cookie是浏览器自带,在客户端可以用来保存用户信息的一种方式,通过JavaScript可以增删改查cookie中的数据,一般会根据业务来决定是否设置过期时间:没有设置失效时间(会话cookie); (1)关闭浏览器;(2)手动清除Cookie;设置时间;(1)时间到了失效,即使关闭了浏览器也不会被清除,因为cookie信息被保存在了硬盘上,浏...原创 2019-02-22 10:38:29 · 10910 阅读 · 1 评论