- 博客(22)
- 收藏
- 关注
RSS订阅原创 typescript --- 映射类型
映射类型：属于ts高级类型，映射类型提供从旧类型中创建新类型的方式。在映射类型中，新类型用相同的方式转换旧类型的每个属性。条件类型：和映射类型类似，也是在一个类型基础上，执行某些条件操作，形成的新类型。概念比较绕，不好理解，看例子：已经被记录在标准库的一些常用的工具函数Record，Partial，Pick，Readonly，还有通过infer（后面介绍）实现的ReturnTyp...
2020-01-09 13:57:04
556
原创 探究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
1929
原创 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
2871
原创 前端缓存小结
最近看了一些关于前端缓存的文章，很多都是概念上的规定，所以记录一下。首先，缓存发生在浏览器收到服务器的响应数据，此时，为了避免以后需要重新访问，减少网络请求次数，就要判断是否需要缓存数据资源。这个判断操作，前端后端都可以进行，前端的话，在html的meta里可以设置（有些浏览器不支持）这段代码表示启用缓存，数据有效时间为60000s，max-age, cache-control后面再说。...
2018-12-26 17:57:17
171
原创 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
13210
原创 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
15023
原创 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
5645
原创 VueRouter之router-view小记
router-view可以实现局部加载，很方便，但是也有坑。router-view使用的前提是，局部加载的组件和加载它的组件要有父子关系，也就是说，需要在加载router-view的组件配置children路由如：{ path: '/attend', name: '参与活动', component: resolve => require(...
2018-05-18 16:04:05
2849
3
原创 谜一样的element-ui按需加载！！！！！
这库看起来还不错，用的着实蛋疼。他的组件很多，基本上不可能加载全部组件，为了减小体积，肯定要按需加载但是！ 这库的组件很奇葩，有的组件引入的时候，只需要在对应的component里import就可以正常使用。譬如 Message，Message-Box而有的组件引入的时候，必须要在main.js里import并vue.use挂载才可以，注意在用到的component里引入是不行的！譬如 butto...
2018-05-16 17:38:44
4536
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
306
原创 移动端使用transition，动画发生抖动
transition 使用对象尽量不要使用 all，最好也不要对元素的 left top 等属性使用transition元素移动动画可以使用translate实现，（translate没有缓冲动画）但是可以对translate使用transition 如： transform: translateX(300px) transition: transform 2s ease这样配套...
2018-04-20 17:20:19
7775
3
原创 display：inline-block后出现上下错位的问题解决办法
每个元素都要有内容，然后再根据需要设置vertical-align：top|middle
2018-04-20 17:11:59
2541
原创 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
131
原创 dpr
dpr：设备像素比 dpr = 物理像素/独立像素标注尺寸的时候是物理像素，代码中是独立像素，根据不同设备的设备像素比，编写不同的样式代码
2018-04-20 17:06:46
1352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人