![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
The Dark Kinght
一天天的都不知道自己在干嘛
展开
-
v-deep解决el-table的fixed列在放大情况下导致的样式问题
问题描述:el-table中使用fixed属性,悬浮了一列数据,在放大的情况下发现该列出现了样式差异,究其原因是设置的overflow属性未被执行。错误样式如下,该图片在浏览器放大到110%时出现问题代码.el-table__fixed-right{ overflow: hidden; }代码虽然没错,但查看样式时返现只有x轴方向执行了溢出隐藏,y轴并未执行,于是出现了该问题问题解决:同事推荐v-deep解决该问题,代码如下 ::v-deep.原创 2021-01-22 14:44:35 · 545 阅读 · 0 评论 -
el-table的empty的插槽不展示问题
问题描述:重复使用同一个el-table时,第一次初始化展示时,空数据是empty的插槽可以展示,但第二次使用该表格时,置空表格的数据后,但是表个无法识别空数据,也不展示empyt的插槽原始代码:大概的方式就是通过watach监听prop传如的数组的变化,通过计算变化的数组得到的新数组赋值给table于是就出现了魔幻的剧情,清空数组后不展示空数组的slot,查找原因是因为源码中空数组的展示判断为false,源码如下:el-table源码: isShowEmptyText() {原创 2021-01-22 14:25:31 · 4185 阅读 · 0 评论 -
Lodash踩坑之dropWhile,dropRigntWhile
在学习Lodash的drop时发现了一个很恶心的问题,一起某度一搜索,全是文档下copy下来的代码,但实际操作时我却遇到了如下的问题:先放中文文档上的代码案例://true在第一位置var users = [ { 'user': 'barney', 'active': false }, { 'user': 'fred', 'active': false }, { 'user': 'pebbles', 'active': true }]; _.dropWhile(user原创 2020-07-25 15:27:47 · 475 阅读 · 1 评论 -
自定义进度条demo
进度条主要是通过css实现的,通过绑定style,来设置宽度进度条的宽度(这里可以用百分比)代码如下:<template> <div class="right"> <div class="top"> <div class="processbar"> <p&...原创 2019-07-12 11:50:39 · 245 阅读 · 0 评论 -
i18n多语言切换
https://blog.csdn.net/qq_35134503/article/details/85005890转载 2019-07-18 13:52:06 · 870 阅读 · 0 评论 -
vue 可复用的多标签的组件封装demo
项目中看到了大佬写的标签组件的封装,感觉很好玩所以自己去实现了一下,下图为实现的效果原来代码的封装思路是将标签和标签的容器单独封装,在创建的时候需要多少标签就去写多少个标签,大致的代码如下<cloud-checkbox-group :value="groups" @input="test" :pure-display="false"> <cloud-ch...原创 2019-07-04 15:45:33 · 1401 阅读 · 0 评论 -
vue封装左侧导航栏组件demo
示例demo的样式:然后说一下布局组件的调用逻辑App-->layout-->sidebar-->sid_menu-->menu_item这里我使用覆盖element的样式的方式,达到项目需求,这里学到了很多如何定位dom元素的样式,使用css阴影,如何覆盖样式,如何使用css3的伪类,如何通过鼠标移动事件找到dom元素等首先使用layout组件并设置...原创 2019-07-08 17:16:18 · 7328 阅读 · 0 评论 -
vue实现抽屉功能
<template> <div class="drawer"> <div @click="open()">11111</div> <div class="setbox" :class="{show: isshow}"> <div class="header"> <p...原创 2019-06-24 12:02:10 · 8397 阅读 · 5 评论 -
Canvas画圆时有条线
如图所示:这里的线是在canvas在绘图完成时自动调用我这里把closePath函数注释掉依然有,还是指向起始位置所以我推测:这里的调用画圆的函数后都会将圆的结束的位置与最近的moveTo位置相连,如果没有定义moveTo,那么连向零点,也就是canvas的左上角。所以当出现如上所示的直线时,你需要知道圆的结束位置,将moveTo位置设置为该起始位置,代码如下:<h...原创 2019-06-25 15:22:29 · 2310 阅读 · 0 评论 -
vue封装模拟jsonp跨域demo
写在前面:jsonp为跨域请求的一种方式,依托于script的src属性,达到跨域的目的,只能发get请求什么是跨域?不同的协议,不同的ip,不同的端口,只要是其中的一种都属于跨域请求。首先用node起个服务serve.js代码如下const express = require('express');const fs = require('fs')const app =...原创 2019-07-24 11:33:49 · 251 阅读 · 0 评论 -
深拷贝的递归实现方法
js递归实现深拷贝的方式https://www.cnblogs.com/xie-zhan/p/6479922.html主要代码:function deepclone(obj1 ,obj2){ if(obj1||obj1=={}){ obj1 = {} } for(let k in obj2){ if(obj2.hasOwnPro...原创 2019-07-25 14:17:22 · 1640 阅读 · 0 评论 -
前端学习资料库集合
雅虎性能优化总结:https://developer.yahoo.com/performance/rules.html?guccounter=1函数式编程中文版:https://github.com/llh911001/mostly-adequate-guide-chinese或者:https://jigsawye.gitbooks.io/mostly-adequate-guide/con...原创 2019-08-02 17:55:32 · 363 阅读 · 0 评论 -
Babel抽象语法树(AST)学习
什么是AST?为什么存在?https://en.wikipedia.org/wiki/Abstract_syntax_tree(维基解释,需翻墙)大致意思是为了方便编译js脚本,用来表达抽象的语法结构而存在的。。。它不表达语法中的每一个细节,只为了表达结构什么是Babel?干嘛用的?Babel官网:https://www.babeljs.cn/docs/简单来说就是为了做语法转...原创 2019-07-26 18:14:18 · 2306 阅读 · 0 评论 -
基于AST的模拟webpack打包demo
问题提出:现在有4个文件,文件的引用方式如下,文件中的文本内容很简单就是输出一句简单的话,需要将这四个文件打包成一个可执行的js文件。main.js:import './file1.js'import './file2.js'console.log('I am done!')file1:console.log('I am file 1') file2 :...原创 2019-08-01 14:15:53 · 567 阅读 · 0 评论 -
vue双向绑定底层原理(数据劫持)感悟
代码参考:https://www.cnblogs.com/wangjiachen666/p/9883916.html一步步走完整个流程,对双向绑定豁然开朗了许多,具体的代码可以看看上面的博客,这里只说说自己学习的感受1,为什么要使用Object.defineProperty?调完代码后我发现,这里通过函数定义的get和set在监听值变化的过程中起到了很大的作用,无论是在去修改值还是读取...原创 2019-08-15 17:22:15 · 324 阅读 · 0 评论 -
实现一个可控深度的展平数组函数(阿里笔试)
问题描述:数组是可多层嵌套,给定一个数组默认展开层数为1 ,数组按照输入层数展开,需要将改方法变为数组的原型方法,实现的demo如下var arr1 = [1,[2,3]];console.log(arr1.flatarr())//[1,2,3] var arr2 = [1,[2,3,[4]]];console.log(arr2.flatarr())//[1,2,3,[4]]...原创 2019-08-30 14:35:06 · 289 阅读 · 1 评论 -
文本框居中,文字自适应换行
BFC布局详解,模块垂直居中详解:https://www.cnblogs.com/hz1124/p/6131795.html<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Example </title> ...原创 2019-09-24 09:31:50 · 650 阅读 · 0 评论 -
类codepen的实现可拖拽窗口demo
首先说下思想flex或者其他布局方式,实现左右分割布局,主盒子宽度100%,左右布局中包含一个分割条(可在布局容器中,也可以单独定义) 为分隔条绑定鼠标点击事件,为document绑定鼠标移动事件和鼠标放开事件,通过监听鼠标移动事件和上一个状态保存下来的鼠标位置作对比,判断当前鼠标移动方向(往左还是往右) 然后计算当前鼠标位置和鼠标点击位置的距离,来计算左右容器的变化,然后通过dom的方式...原创 2019-06-17 16:50:15 · 479 阅读 · 1 评论 -
百度地图如何去除路网图,建筑物,建筑物名称
2019.6.17更新由于我的项目突然出现了白屏的问题,定位bug到设置样式的函数,一旦设置样式就会报跨域请求阻塞的问题,花了一个中午的时间给解决了,百度真坑..目前想要设置百度地图的样式需要作出以下调整需要将原有的2.0版本修改为3.0版本 需要调用3.0版本设置样式的函数setMapStyleV2(),其他参数不变 需要将所有的设置函数放在样式设置位置以上,否则会报父节点找不到...原创 2018-05-31 19:27:21 · 22473 阅读 · 8 评论 -
css 处理文本不换行的方法
https://www.cnblogs.com/sensualgirl/p/3712332.html转载 2019-06-13 14:16:38 · 1954 阅读 · 0 评论 -
前端js框架到底有哪些?
做前端开发的都知道3大框架:Angular,Vue,React。但是除了这三个框架以外的前端框架还有那些?他们在前端技术的发展中有什么样的作用?哪些网站还在用它们?下面具体介绍下前端都有那些框架:MobX网址:https://cn.mobx.js.org/Github 仓库: https://github.com/SangKa/mobx-docs-cnOmniscient...原创 2019-01-21 16:00:27 · 7035 阅读 · 0 评论 -
如何通过网页获取该网站的js框架
昨天正在吃鸡ing,3杀就快决赛圈了,突然老师丢给三个网站链接,让我去查查他们用的什么js框架。。。讲道理,刚看到这个问题的时候我也是头皮一麻怎么可能通过网页就能看到人家是啥框架?人家不都封装过了吗?那些写这个网站的都是傻×吗?随便就让你看核心js框架啊?经过两天的实验和查资料,貌似也是可以看查到的,毕竟人无完人,总有百密一疏的时候。当然这只是我尝试过的一些方法,我的问题解决了...原创 2019-01-21 18:59:13 · 1893 阅读 · 0 评论 -
Redux使用总结
使用Redux的原因:react数据是单项流动的,想在不同的组件间传值极为不便,组件传值可参考之前的博客,要在不同的页面间组件传值根本无法做到,所以通过一种方式来实现对state的统一的管理,那就是Redux。当然在Redux以前有Flux,两者本质上都是管理state,但区别很大,在这里具体不在详述,可以自己查找相关对比博客。本文只是自己的阅读代码后的总结,具体的项目可通过这里下载首...原创 2019-01-16 14:50:05 · 136 阅读 · 0 评论 -
http常用状态码
HTTP状态码表示HTTP协议所返回的响应的状态100:继续 客户端应当继续发送请求。客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应。101: 转换协议 在发送完这个响应最后的空行后,将会切换到在Upgrade 消息头中定义的那些协议。只有在切换新的协议更有好处的时候才应该采取类似措施。102:继续处理 由WebDAV(RFC 2518)扩展的状态码,代表处理将被继...转载 2019-02-28 11:18:22 · 127 阅读 · 0 评论 -
React项目进入系统后直接重定向到登录页面
我现在的项目进来后直接到的是控制台页面,可需求上要求直接进来后需要到登陆页面,不登陆将无法使用系统这里我踩了两个坑,一个是初始化路由时顺序的问题如果将上面两个渲染的布局组件交换位置,就会导致登录页面在框架内使用,没有使用自己的组件渲染,如下图所示还有一个问题就是重定向的,如果只输入本地服务地址和端口会直接跳转到控制台页面。现在需要将它定位到登录页面,首先时在控制台的布局...原创 2019-02-28 17:11:59 · 10596 阅读 · 0 评论 -
react-redux登录时将数据存入store,在其他页面获取数据
登录组件的目录结构登录调用函数,调用action,将表单数据传过去调用action,调用接口传入数据通过dispatch函数,调用reducer将数据传入store然后使用调试工具redux-devtools可以看到当前多了token的节点接下来是在其他页面获取token只需要将state的数据取出来,连接到当前的组件的prop属性...原创 2019-03-01 15:17:13 · 7668 阅读 · 0 评论 -
react使用localStorage存储token
登录的接口传回Token,将其直接放在store中刷新后自动丢失,所有考虑用redux-persist去处理,由于相对复杂所以就放弃了然后找到了用localStorage存储数据的方法登录时将接口返回的数据存入localStorage登录接口调用成功后 调用函数将数据保存,登录刷新后判断取出数据可以直接取出使用,也可以放入state中,在退出登录时清空localSt...原创 2019-03-04 12:52:13 · 8484 阅读 · 0 评论 -
关于Cookie的问题总结
能够存储的数据结构到底有哪些?浏览器端:cookie,WebStorage(localStorage,sessionStorage),userData,indexedDB服务器端 : session什么是cookie?它存放在哪?维基上给出的解释是:Cookie(复数形态Cookies),又称为“小甜饼”。类型为“小型文本文件”,指某些网站为了辨别用户身份而储存在用户本地终端(Cl...原创 2019-03-20 17:28:28 · 385 阅读 · 0 评论 -
异步请求与Promise、async-await的总结
Promise和async-await主要的目的是为了处理异步请求,那什么是异步请求?什么是同步请求?同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。具体的说同步——使用者通过单个线程调用服务;该线程发送请求,在服务运行时阻塞,并且等待响应。异步——使用者通过两个线程调...原创 2019-03-13 14:26:32 · 785 阅读 · 0 评论 -
React的context学习总结
context是干什么的?为什么会存在这么一个东西?context字面意思是上下文,在react中存在是为了解决深层次组件传值困难的问题这里涉及到组件的传值问题,大体商说分三总:兄弟间传值(通过父组件),父往子传值(通过props),子往父传(props函数回调),这是基础的传值问题,但是如果组件嵌套的太深,那么传值就变的非常麻烦,为了解决这样的问题才产生了context这是cont...原创 2019-03-25 13:30:36 · 178 阅读 · 0 评论 -
网易笔试题总结
var string = 'string';var number = 0;var bool = true;console.log(number || string);console.log(number && string);console.log(bool || number);console.log(bool && number);输出结果...原创 2019-04-02 15:47:27 · 1049 阅读 · 0 评论 -
vue的v-slot指令使用总结
父组件代码:<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <slotdemo> <template v-slot:a> this is a </temp...原创 2019-05-05 16:58:03 · 4307 阅读 · 0 评论 -
vuex使用总结
学习用例是在github上找的demo,在原来的基础上学习和总结源demo地址:https://github.com/lzxb/vue2-demo里面有安装教程,但是这个demo无法使用es6 的异步方法(会报$export is not a function 错误),需要安装polyfill环境,具体安装和配置的方法如下:npm install --save @babel/poly...原创 2019-05-14 13:46:08 · 202 阅读 · 0 评论 -
vscode使用技巧
https://blog.csdn.net/u011127019/article/details/58586129转载 2019-05-14 15:51:52 · 108 阅读 · 0 评论 -
vue中路由管理(vue-router,page)使用总结
现在的项目都以模块化的方式去开发,所以在这样的开发模式下,如何更好的去管理路由是开发中所需要考虑的重点,幸运的是当前的开发中已经有了成熟的中间件去管理,我们只需要用就可以了下面是我在学习vue-router的时候在原来基础上修改出来的demo,也是为了有助于对vue-router的理解首先理解下vue官网的一个示例demohttps://jsfiddle.net/yyx990803/x...原创 2019-05-10 15:15:28 · 4236 阅读 · 0 评论 -
veeValidate使用详解
https://segmentfault.com/a/1190000013431243?utm_source=channel-hottest转载 2019-05-16 14:36:57 · 631 阅读 · 0 评论 -
vue多语言版本切换
https://blog.csdn.net/DOCALLEN/article/details/78408137?locationNum=2&fps=1https://blog.csdn.net/Dream_xun/article/details/82743762转载 2019-05-22 13:56:47 · 3399 阅读 · 0 评论 -
html+css实现三列布局的4种方式
面试问到一个问题,要设计左右两边固定100px,中间自动填充,总长度为100%的一个页面刚开始我说用栅格,实践上确实不行,所以去百度下如何实现,自己去实现了4种方式分别是:BFC块级布局,flex布局,table布局,css计算宽度布局由于不懂BFC布局,所以在实现布局的时候走了很多弯路,一直复现失败,但后调整了html中的div顺序解决了问题,直到现在我还是不能理解这个问题,等我看懂了再...原创 2019-01-14 17:16:53 · 9239 阅读 · 0 评论