css使文本间加、的方法

<span class="item">张三</span> 
<span class="item">张三</span>
------------------
.item + .item::before{
    content:'、'
}

比较一个dom元素样式变动对比

1、下载github.com/kdzwinel/CS…
2、把下载的包 chrome能直接导入扩展程序（会显示错误，无所谓） 3、注意使用步骤，位置是在元素这个大类，和样式平级

调试方法

1、先找到源码的位置，复制要观察的那部分的一段特征代码，然后控制台点这个 2、刷新页面，加载js文件，按下面组合键开启查询模式，定位特征代码在哪个js文件内 3、把要搜索的粘过去定位文件位置，点击就能进源码，再打断点，操作调试

nth-child更优替代（mdn看英文文档）

nth-child 标签中间有其它元素的时候，会把其它元素也纳入计数
:nth-of-type() 相同类型（标签名称）的兄弟元素中的位置来匹配元素。

p:nth-of-type(2){
...
}

在已有组件上添东西

flex

flex-direction: row; 默认高度会占满相当于子项align-self: stretch;
flex-direction: column; 默认子元素宽度会占满父flex盒子，需要align-items:flex-start;
想展示flex盒子内部元素真实高度，需要设置flex的同时设置 align-items: flex-start;

body上挂载的组件，vue内部scss scoped导致无法选中

this.$options._scopeId 即为本组件页面挂载时统一添加的html属性

对于popover组件 可以created里这样操作，后面style里即使scoped也能选中
 this.$refs.popover.$refs.popper.setAttribute(this.$soptions.__scopeId,'')

更优雅的操作

实际上针对这个问题，可以style加scoped后，el-popover内部slot添加类名（它html会自动加该组件唯一属性）然后该类名放到该style里的一级选择器里（自己就是根，没有外层），此时组件html会增加属性，同时选择器也可以选中
之所以采取这个方案，是由于使用transition时，el-popover自身是不会被添加组件的唯一属性的（它内部的插槽会被添加）

popover组件可以自定义过渡动画

这个transition切换状态时会往元素上加类名但挂载元素的html里没有style里scoped的属性，所以style如果加scoped会失效。用上面的方案给el-popover强制添加属性选择器

vscode快速在新窗口打开最近的文件

进度条拖动时el-tooltip错位的问题

打印组件实例后，一层一层往里扒，找到目标组件方法后，右键可以赋值路径

   handleMousedown(){
     this.showTooltip=true
     this.$refs.sld.$refs.button1.$refs.tooltip.updatePopper()
   },
   handleMouseup(){
     this.showTooltip=false
     this.$refs.sld.$refs.button1.$refs.tooltip.updatePopper()
   },

程序员小山与bug视频摘录(基于elementui2.x)