话说，最近在项目中应用ElementUI组件，又踩坑了。这次踩坑的是el-dialog、el-drawer两兄弟。
一、el-dialog组件
踩坑现象：
el-dialog组件关闭时，在关闭的方法里没有进行接口请求，但却触发了接口请求。
现象产生原因：
一开始发现此现象时，很是奇怪，不知道是啥原因。后来经过查询才知道，在引用el-dialog组件时，如果将destroy-on-close（关闭时销毁 dialog 中的元素）属性值设为true，则el-dialog关闭时就会触发其子组件的created/mounted生命周期。而如果子组件的created/mounted里有调用接口，则el-dialog组件关闭时就用有接口请求的现象。
为什么将destroy-on-close设置为true，就会触发子组件的生命周期呢？
因为destroy-on-close属性的实现原理是，如果其值为true，则在关闭el-dialog组件时重新渲染组件内的内容，而不是在下一次打开时重新渲染,所以会在关闭时会触发子组件的created/mounted。
解决方案：
如果想要销毁dialog中的元素，又不想在关闭的时候引起无用的接口请求，应该怎么处理呢？
用v-if,v-if能够实现在关闭dialog时即销毁dialog中的内容，而在下次显示时再重新加载。
二、el-drawer组件
踩坑现象：
el-drawer组件在设置了withHeader为false的情况下，打开时，会自动聚焦里面的可聚焦的第一个组件，且时间控件或者下拉框等会自动弹出，如下图：
现象产生原因：
withHeader设置为true时，drawer打开时drawer内第一行title会获取到焦点，出现蓝色边框。而withHeader设置为false时，drawer自带的title就不显示了，drawer组件就自动聚焦到第一个可聚焦的子组件。
解决方法：
如果不需要drawer组件自带的header栏，则将withHeader设置为true，然后进行如下样式修改，即可达到withHeader=false的效果，且肉眼不会看到自动聚焦的现象。
/deep/ .el-drawer{
.el-drawer__header{
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
如果需要组件自带的header栏，可按以下方法解决title出现蓝色边框问题。
/deep/ :focus {
outline: 0;
}
