overtree-CSDN博客

原创 React 组件定义（泛型）

interface Prop<RowType> { list: RowType[] renderItem: (row: RowType, index: number) => JSX.Element}<RowType extends any>( props: Prop<RowType> & { ref?: React.Ref<Refs> }) => JSX.Element

2021-12-06 21:48:49 1486

原创实用的正则：queryString replace

'&1qqq=ccc&fff=123&'.replace(/(^|&)(1qqq=)([^&]*)(&|$)/i,'$1$2'+ 你要替换的值+'$4')

2020-04-14 19:30:16 215

原创 display:table 的坑

如果子元素中有display:table 的元素，那么父元素的line-height 失效，总高度会已此子元素高度为准。

2018-08-10 13:30:17 493

原创 vscode 调试 nuxt 服务端部分

{ "version": "0.2.0", "configurations": [ { "name": "nuxt Dev", "type": "node", "request": "launch", &

2018-04-04 12:16:43 4096 3

原创 pm2 启动 npm 脚本

pm2 -i 0 start npm -- start两个短横线之后有空格

2018-04-03 15:55:32 1497

原创 Unicode 对照表 JS源码

找个支持ES6的现代浏览器执行一下，循环不要太多for (var i = 1000; i <2000; i++) { eval('console.log("' +i.toString(16).padStart(6,"\\u0000") +'","' + i.toString(16).padStart(6,"\\\\u0000") +'")')}

2018-01-03 18:17:42 474

原创 writing-mode 的妙用

用 padding-bottom 撑起高度，设置 padding-bottom 为百分比，padding-bottom 相对于容器的 width，容器的 width 改变，则 padding-bottom 改变，继而高度改变用 padding-bottom 撑起高度，设置 padding-bottom 为百分比，padding-bottom 相对于容器的 width

2017-03-29 23:36:06 460

原创当子元素有 margin 属性，父元素高度问题

当子元素设置了margin-top，父元素没有设置border时，父元素高度为子元素高度当父元素设置了border，父元素高度为子元素高度 + margin-top 的值

2017-03-04 00:32:31 1029

原创 webpack1.x + ElementUI 初探

ElementUI 目前版本是1.1，虽然还在1.x阶段，但是组件种类已经很丰富了，用来ElementUI 做管理页面，非常合适。本文介绍在真正开始使用ElementUI 之前的准备工作，适合第一次使用webpack打包工具和想体验 ElementUI 的小白同学。

2016-12-18 20:52:42 1337

前言随着智能硬件的普及，手机，平板，PC甚至路边的电子广告牌，现代浏览器已经无处不在。在浏览器里编织出我们自己的一片天地已经轻车熟路，但是这还不够，H5赋予了浏览器太多的新特性，等待我们去使用。这篇文章介绍利用手机浏览器的罗盘API，在PC的浏览器实时地绘制一个3D盒模型。这种炫酷的玩法叫做“多屏互动”，就像是把手机当做游戏手柄，PC显示器当做电视机，不过这些都是在浏览器里实现的。先上效果图 (测

2016-12-15 14:24:08 1425

原创 npm install 时，容易安装失败的解决方法

还是那句话，直接用国外的资源，太容易失败了。仅仅指定 registry 到淘宝的镜像还不够添加以下配置到 ~/.npmrc

2016-07-29 10:43:27 3807 3

原创无需Flash录视频——HTML5中级进阶

HTML5的权限越来越大了，浏览器可以直接调用摄像头、麦克风了，好激动啊。我们要用纯洁的HTML代码造出自己的天地。

2016-06-28 01:04:40 499

原创 HTML垂直居中的终极解决方案

既然说到兼容一切，那么就不用CSS3的 transform 写法我采用CSS2 的 vertical-align属性用过clearfix 的人应该知道，通过加入一个，高度为0 的元素，来清除浮动。本文介绍的原理大致相同，通过加入一个，宽度为0，高度100%，的内联元素，来居中基线。自定一个一个clearmid 的样式如下.clearmid{ height:100%; widt

2016-05-18 10:07:00 564

原创无需Flash实现图片裁剪——HTML5中级进阶

图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。但是我不会Flash....

2016-04-11 10:53:43 869 1

原创修改 Content-Disposition 可激活操作系统预览，不在浏览器内查看

Content-Disposition: attachment; filename=”xxx.xxx”

2016-03-31 19:25:24 641

原创 chrome内核浏览器，排版错位

用 SemanticUi 做的长表单dialog，限于显示器分辨率的大小，往往只能看到一半的内容，再往下就需要滚动显示。然而，由于验证信息，表单项目的插入等影响，可见部分的元素高度可能往下挤压。这使得表单总高度变长。当你理所当然的以为，不可见部分的元素会被自动向下滚动，你会发现，部分元素，还处于未被挤压之前的一个状态。我们会看到一个错位的排版。这时点击表单任何位置，所有元素排版又会正常

2016-03-31 18:46:31 10394

WebDog—王西西

原创新的CSS样式