自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

炯炯灯的博客

心悦君兮君不知

  • 博客(22)
  • 收藏
  • 关注

原创 typescript --- 映射类型

映射类型:属于ts高级类型,映射类型提供从旧类型中创建新类型的方式。在映射类型中,新类型用相同的方式转换旧类型的每个属性。条件类型:和映射类型类似,也是在一个类型基础上,执行某些条件操作,形成的新类型。概念比较绕,不好理解,看例子:已经被记录在标准库的一些常用的工具函数Record,Partial,Pick,Readonly,还有通过infer(后面介绍)实现的ReturnTyp...

2020-01-09 13:57:04 555

原创 探究BFC和float

BFC和float本身其实没什么关系,但是BFC的一个用途是用来清除浮动,所以放在一起了。首先BFC(块级格式化上下文),就算是中文翻译过来也不是很好理解,可以理解为一个独立的渲染空间。这个空间内部的子元素布局不受外部元素的干扰,例如浮动元素,就是一个BFC。说完BFC说float。其实float我现在用的比较少,基本都可以用其他方式实现。刚刚学习css的时候,看到这个元素觉得很神奇,可以...

2019-08-05 11:32:12 283

原创 vue 2.6 以及vue 3.0的$attrs, $listeners, inheritAttrs

最近做新项目,写基础组件用到了vue2.6的新特性$attrs, $listeners, inheritAttrs。其实也不算新了,只是自己以前没用过,突然觉得自己更新知识的速度还是有点慢的。看来没事还是得多逛逛国外前端大佬的博客。这仨货的基础知识文档都有,这种东西还是在项目里说明比较易懂而且实用,所以我直接说下基础组件的编写过程好了,以AutoCompleteInput组件为例。首先要清...

2019-06-15 09:14:30 1926

原创 read only的vue route对象

今天大佬让我改个小需求,结果因为对route对象了解的不够多,未能完成任务,有点小尴尬。需求是:在venue list页面的beforeRouteEnter钩子里,对to.query进行参数校验以及初始化,说白了就是判断当前路由的query是否是我们需要的,而且符合类型要求。听上去蛮简单的的一个需求,做起来也不是很难。我就把必需的query列了出来,写了个循环判断下是否每个query都存在,...

2019-06-07 00:55:21 710

原创 vue指令 --- vue-observe-visibility

一个很方便的loader----vue-observe-visibility应用场景一:代替position: sticky, 这个属性简单来说 可以用来让元素在未超出屏幕高度时保持relative,超出屏幕高度时呈现position: fixed的效果。可以用于实现一些很常见的需求。但是这个属性目前只有chrome支持的比较好,兼容性不是很好,所以需要替代方案-----vue-obse...

2019-05-13 17:50:56 2862

原创 前端缓存小结

最近看了一些关于前端缓存的文章,很多都是概念上的规定,所以记录一下。首先,缓存发生在浏览器收到服务器的响应数据,此时,为了避免以后需要重新访问,减少网络请求次数,就要判断是否需要缓存数据资源。这个判断操作,前端后端都可以进行,前端的话,在html的meta里可以设置(有些浏览器不支持)这段代码表示启用缓存,数据有效时间为60000s,max-age, cache-control后面再说。...

2018-12-26 17:57:17 170

原创 Vue diff算法思路

vue的diff算法用于视图更新,也可以说是dom更新。俗话说有对比才有差距,vue也是通过将dom前后进行对比,再进行更新。dom是树状结构,因此对比过程中需要先将它化成对象的形式(虚拟dom)如:var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ]};对比是逐层进行...

2018-11-12 18:31:51 4289 1

原创 WEB API action请求不到的原因

WEB API请求的过程是:URL =>> 匹配路由模板 =>> 匹配 controller =>> 匹配 actionWEB API与MVC不同的是,WEB API是通过请求的方式来匹配action,默认从action的方法名中获取,就是说,如果action以GET开头,那么匹配的时候,就把他看作get的action。但是,如果action没有以请求开...

2018-10-18 17:20:37 1997

原创 动态设置meta标签

有时候在项目中打开别的网页,需要给网页设置meta,如缩放禁止等。这时候在index.html中设置失效需要额外设置。可以使用插件vue-meta:文档:https://github.com/declandewet/vue-meta#npm{ metaInfo: { meta: [ { charset: 'utf-8' }, { name: 'viewport'...

2018-07-03 14:48:44 13202

原创 img无src时如何去除边框

给img加一层div,然后用设置css opacity为0html:<div class="selectPhoto"><img src="" /></div>css:.selectPhoto img[src = ""]{opacity:0;}

2018-06-25 16:11:22 5003

转载 Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不刷新的解决办法

再跳转后的路由观察路由变化,进行页面刷新。watch: {     '$route' (to, from) {      this.$router.go(0); }}参考https://blog.csdn.net/wulala_orz/article/details/78928524#commentBox...

2018-06-19 15:12:57 15016

原创 router-link切换路由不存入history记录的方法

在做tab切换子路由需求的时候,点击后退键,就会返回上一个子路由,不是很符合实际需求。可以在router-link后面加上关键词repalce,就可以实现切换子路由,路径不存入history。如果是编程式路由,可以把router.push()换成router.repalce() 如<router-link to="/attend/activityCool" replace class="al...

2018-06-06 11:21:38 5637

原创 VueRouter之router-view小记

router-view可以实现局部加载,很方便,但是也有坑。router-view使用的前提是,局部加载的组件和加载它的组件要有父子关系,也就是说,需要在加载router-view的组件配置children路由如:{          path: '/attend',          name: '参与活动',          component: resolve => require(...

2018-05-18 16:04:05 2847 3

原创 谜一样的element-ui按需加载!!!!!

这库看起来还不错,用的着实蛋疼。他的组件很多,基本上不可能加载全部组件,为了减小体积,肯定要按需加载但是! 这库的组件很奇葩,有的组件引入的时候,只需要在对应的component里import就可以正常使用。譬如 Message,Message-Box而有的组件引入的时候,必须要在main.js里import并vue.use挂载才可以,注意在用到的component里引入是不行的!譬如 butto...

2018-05-16 17:38:44 4534 1

原创 vue打包项目,webpack配置改变以及图片正确引入姿势

https://www.cnblogs.com/moqiutao/p/7496718.html

2018-05-11 17:37:54 1271

原创 better scroll失效原因

容器和内容嵌套规则要正确:<div class='wrapper'>    <div class='content'>content    </div></div>注意内容要用div包起来,也就是说容器内只能有一个div...

2018-04-20 17:23:26 304

原创 移动端使用transition,动画发生抖动

transition 使用对象尽量不要使用 all,最好也不要对元素的 left top 等属性使用transition元素移动动画可以使用translate实现,(translate没有缓冲动画)但是可以对translate使用transition 如:  transform: translateX(300px)        transition: transform 2s  ease这样配套...

2018-04-20 17:20:19 7761 3

原创 display:inline-block后出现上下错位的问题解决办法

每个元素都要有内容,然后再根据需要设置vertical-align:top|middle

2018-04-20 17:11:59 2539

原创 box-sizing

即声明对该元素使用IE盒子模型,即指定宽度中包括padding,border,width。在指定宽度后,添加padding,border后,内容部分会自适应。

2018-04-20 17:10:56 100

原创 移动端1px边框实现

给指定div添加伪类:after或者:before给伪类设置content为空,border 1px,再将伪类进行缩放(transform:scaleY(数值))

2018-04-20 17:08:22 236

原创 sticky footer实现

sticky footer实现:在内容区外层添加一个div给内容区设置padding-bottom,再给页脚区设置相同的负值margin-top,给外层div设置min-height为最小窗口

2018-04-20 17:07:32 129

原创 dpr

dpr:设备像素比 dpr = 物理像素/独立像素标注尺寸的时候是物理像素,代码中是独立像素,根据不同设备的设备像素比,编写不同的样式代码

2018-04-20 17:06:46 1352

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除