
web前端
文章平均质量分 59
哎呦喂1111
这个作者很懒,什么都没留下…
展开
-
antd 表格用fixed:“left”在typescript中报错
[ts]Type '{ pagination: { total: number; pageSize: number; defaultPageSize: number; showSizeChanger: true; ...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Table&...原创 2019-10-18 15:58:19 · 2337 阅读 · 2 评论 -
前端面试总结/JS面试
1.JS继承机制 构造函数中的属性和方法是不共享的,而为了共享一些属性和方法,也为了不浪费资源,出现了prototype,挂在prototype上的属性和方法是共享的。function Ani(name) { this.name = name; // this.act = '叫';}var dog = new Ani('狗');var cat = new Ani('猫');...转载 2018-05-03 11:48:23 · 186 阅读 · 0 评论 -
浏览器前缀
浏览器 内核 前缀Chrome : WebKit内核 -webkit- Safari : WebKit内核 -webkit- Firefox : Gecko内核 -moz- IE : Trident内核 -ms- Opera : Presto内核 ...原创 2018-04-26 11:02:15 · 1937 阅读 · 0 评论 -
vue.js 按需加载ElementUI 和 echarts
1. vue按需加载echarts当我们只需要 echarts 的 line 和 tooltip 模块的时候,我们会这么写:import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/line'import 'echarts/lib/component/tooltip'当引入了这个插件后,我们只需要写这个 :// es...原创 2018-04-26 11:38:41 · 4529 阅读 · 0 评论 -
vue按需加载组件 ----3种方法
1. vue异步组件技术vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如:Vue.component('async-example',...原创 2018-04-26 14:09:01 · 14595 阅读 · 0 评论 -
IE浏览器下使用AJAX登陆接口请求缓存与登陆不了的问题解决
由于IE浏览器自己本身的原因,当你请求的接口没有变化的时候他会默认从缓存中去读取数据,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端。在某些情况下,这种默认的缓存机制并不是我们希望的(比如获取实时数据),这篇文章就来简单地讨论这个问题,以及介绍几种解决方案。1.在URL后面加上一个随机数: "?rand=" + Math.random() 由于IE针对Ajax请求...原创 2018-04-26 14:57:08 · 717 阅读 · 0 评论 -
Vue.js自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被...原创 2018-04-26 16:03:01 · 854 阅读 · 0 评论 -
深入理解闭包
古老定义 闭包(closure),是指函数变量可以保存在函数作用域内,因此看起来是函数将变量“包裹”了起来 那这样说来,包含变量的函数就是闭包//按照古老定义,包含变量n的函数foo就是闭包function foo() { var n = 0;}console.log(n)//Uncaught ReferenceError: n is not defined定义一 闭包是指可以...翻译 2018-05-17 14:57:40 · 274 阅读 · 0 评论 -
js数组去重
function norepeat(arr) { var new_arr = []; //定义一个新的数组。 var obj = {}; //循环遍历当前数组把数组中的元素保存在这个对象中 for(var i = 0, len = arr.length; i < len; i ++) { if(!obj[arr[i]]) ...翻译 2018-05-18 09:49:19 · 168 阅读 · 0 评论 -
meta viewport的原理
什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放...翻译 2018-05-18 16:46:59 · 255 阅读 · 0 评论 -
vue导航以及vue路由传参的三种基本方式--全解析
vue导航声明式编程式<router-link :to="...">router.push(...)除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location, onComplete?, onAbort?)注意:在 Vue 实例内部,你可以通过 $router 访...翻译 2018-05-07 17:09:36 · 2286 阅读 · 0 评论 -
9种原生js动画效果(转)
1,匀速动画效果window.onload = function(){ var odiv = document.getElementById('odiv'); odiv.onmouseover = function(){ startMover(0); } odiv.onmouseout = function(){ startMover(-200); }}var timer ...转载 2018-05-08 11:04:22 · 2133 阅读 · 0 评论 -
vue中特殊的知识点
vm的一些属性和方法 var vm=new Vue({ aa:11, el:'#box', data:{ } }) vm.$el //代表root元素 vm.$data //代表data vm.$mount('#box') //手动挂载 vm.$options.aa //自定义属性 ...转载 2018-05-16 09:48:06 · 223 阅读 · 0 评论 -
Web前端性能优化——如何提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收...转载 2018-05-30 16:52:27 · 874 阅读 · 1 评论 -
vue 刷新之后 嵌套路由不变 重新渲染页面
解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的1.在router-view中加上条件渲染 v-if 默认为true。让它显示出来 ,2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick,条件渲染变化了为true则可以在回调中...原创 2018-06-15 15:00:41 · 9959 阅读 · 0 评论 -
vue tab切换echarts的时候(v-if和v-show)所踩得坑
由于v-show只是设置了元素的display属性为none,在切换的时候没有获取到元素的宽高所有会有问题,换成v-if就ok了echarts如果用v-if来切换显示隐藏两个不同配置的图标,比如说柱状图和饼状图的时候,如果柱状图不配置x轴和Y轴的现实和隐藏如下图这样在切换的时候饼状图也会保留这个坐标轴,解决方案是在各自不同的配置选项中配置坐标轴的show参数。饼状图的设置为false,这样就不会显...原创 2018-07-06 15:42:30 · 11833 阅读 · 1 评论 -
VUE的生命周期
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed先来一波代码,各位复制在浏览器中运行,打开console查看就...转载 2018-07-30 08:22:56 · 131 阅读 · 0 评论 -
前端面试之两栏布局,左侧固定右侧自适应;三栏布局,左右定宽,中间自适应
左右布局:左边定宽、右边自适应,1.1浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上先看代码<style>body{margin:0;} //为了统一布局,去掉了浏览器自带body的margin值.left{ width:200px; float:left; height:400px;; background:#99F;}.main{ heig...转载 2018-08-03 21:11:22 · 564 阅读 · 0 评论 -
vue源码---去掉前后空格 trim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g
解读 trim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g 正则:const trim = function(string) { return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');};这个正则是jquery的trim的去掉前后空格的:\s:空格\uFEFF:字节次...原创 2018-08-03 21:46:08 · 3054 阅读 · 0 评论 -
图片懒加载
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>图片懒加载实例</title> <style> * { margin:原创 2018-07-30 21:44:31 · 157 阅读 · 0 评论 -
meta标签大全
之前一直开发移动端,最近项目开始做pc端的业务,项目要求兼容ie8,只能说对于前端开发来说,ie8绝对是一个噩耗,在开发pc端时不可以避免的就是遇到N多兼容性问题。 所谓浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容...转载 2018-07-30 21:53:54 · 691 阅读 · 0 评论 -
输入网址到浏览器渲染页面的过程
1) 在客户端浏览器中输入网址URL。2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。5) WEB服务器响应请求,返回指定的URL数据或错误信息;如果设定重定向,则重定向到新的URL地址。6) 客户端浏览器下载数...转载 2018-07-31 08:00:47 · 4081 阅读 · 0 评论 -
vue props对象 (validator自定义函数)
用于接收来自父组件的数据(子组件期待获得的数据)类型:字符串数组或者objectvalidator自定义函数props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { typ...原创 2018-08-04 14:23:43 · 12319 阅读 · 0 评论 -
css控制页面文字不能被选中user-select:none;
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中。原因:鼠标点快了文字会被选中。解决方案:不同的浏览器设置的内容不一样,user-select不是一个W3C的标准,浏览器的支持不完成,需要对不同的浏览器进行调整。body{-moz-user-select:none;/*火狐*/-we...原创 2018-08-04 16:21:21 · 636 阅读 · 0 评论 -
getBoundingClientRect的用法
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。1.语法:这个方法没有参数。rectObject = object.getBoundingClientRect();2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素...原创 2018-08-04 16:34:25 · 250 阅读 · 0 评论 -
在vue中使用sass的配置的方法
1、创建一个基于 webpack 模板的新项目$ vue init webpack myvue2、在当前目录下,安装依赖$ cd myvue$ npm install3、安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sas...原创 2018-08-04 21:05:39 · 601 阅读 · 0 评论 -
webpack之proxyTable设置跨域
为什么要使用proxyTable很简单,两个字,跨域。 在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。 如何使用...转载 2018-07-27 17:47:30 · 536 阅读 · 0 评论 -
基于Vue实现后台系统权限控制
正文用Vue这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了数据交互更频繁以外,还有一个特别的需求就是对用户的权限控制,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。权限控制是什么在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源。具体的说,前端对资...转载 2018-08-05 14:24:05 · 404 阅读 · 0 评论 -
字符串去重。
采用正则/*** 字符串去重* \r\n字符串分隔符* $1分割后的字符串,$2字符串的索引* 以分隔符将字符串分割,根据分割后的数组元素的个数进行循环比较*/ function strUnique(){ var str = "abc, abcd, abc, abcde, abcd, abcde"; var ret = []; ...原创 2018-08-02 11:26:38 · 677 阅读 · 0 评论 -
css 实现对号小图标。
<div class="h"></div>.h { position: relative; width: 80rpx; height: 80rpx; background-color: rgba(0, 0, 0, 0.4); z-index: 5;}.h::before { content: ''; po...原创 2018-08-16 09:59:36 · 561 阅读 · 0 评论 -
vue路由懒加载,小概率404的解决方案
1.resolve => require([URL], resolve),支持性好 2.() => system.import(URL) , webpack2官网上已经声明将逐渐废除,不推荐使用 3.() => import(URL), webpack2官网推荐使用,属于es7范畴,需要配合babel的syntax-dynamic-import插件使用。...原创 2018-08-16 10:21:00 · 1154 阅读 · 0 评论 -
面试
在过去的半年多时间里很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着换一份工作来重新开始自己,那么你准备好了吗?下面是本人整理的一份面试材料,本想自己用的,但是为了让大家都能够在金九银十找到心仪的工作,我决定分享出来!!! 1、 viewport <meta name="viewport" content="width=device-w...转载 2018-09-11 17:08:49 · 138 阅读 · 0 评论 -
如何阻止表单的默认提交事件
表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。 如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:如果想要阻止表单的默认提交事件,有以下几种方法:1.将<input>标签内按钮类型从type="submit"修改为type="button"2.表单内的<button>未指定类型时,...转载 2018-09-03 09:24:08 · 315 阅读 · 0 评论 -
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue。这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢? vue-validator呀。 我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需要。事实证明,v...转载 2018-09-03 09:33:44 · 826 阅读 · 0 评论 -
VUE知识点大总结
https://segmentfault.com/a/1190000012692321#articleHeader76转载 2018-09-03 09:38:10 · 106 阅读 · 0 评论 -
NGDIALOG中文API
.open(options)打开对话窗口,在每次调用时创建新的对话框实例。接受对象作为唯一的参数。参数选项Options:template {String}对话框模板可以通过所给路径加载外部html模板或type=”text/ng-template”的script标签。<script type="text/ng-template" id="templateId"> ...原创 2018-09-03 09:42:27 · 397 阅读 · 0 评论 -
基于Vue实现后台系统权限控制
https://refined-x.com/2017/08/29/%E5%9F%BA%E4%BA%8EVue%E5%AE%9E%E7%8E%B0%E5%90%8E%E5%8F%B0%E7%B3%BB%E7%BB%9F%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6/ 写在前面本文中的菜单权限控制方案由于没有使用router.addRoutes()实现动态路...转载 2018-09-03 09:47:23 · 464 阅读 · 0 评论 -
CSS3制作hover下划线动画
CSS3制作hover下划线动画1、前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图 2、实现小黑科技1 <!-- html结构 -->2 <div>3 <a href="javascript:void(0);" class="demo1">自己实现的hover效果<...原创 2018-09-06 09:21:30 · 406 阅读 · 0 评论 -
transition属性和animation属性
一、transitionCSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多,所以才会更平滑。transition的属性属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以...原创 2018-09-06 09:54:28 · 1920 阅读 · 0 评论 -
H5 页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 一、获取基本信息 找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置...转载 2018-09-12 13:28:22 · 503 阅读 · 0 评论