匪夷所思的一些问题(备忘录)

说明

总结一下日常遇到的UI框架坑，也可能是兼容坑。遇到一些写一些，不停补充。

一、ElementUI——组件内icon图标

谷歌浏览器一切正常，在IE11浏览器下，像select组件右边那个下拉箭头，还有input内清空按钮的图标line-height属性出现问题，图标要么飞到天上去，要么位置很低。
排除全局样式的影响后，line-height值必须和input高度一致，否责值过小过大都无法修改正常。

咱就说可能没有加上size="mini"的参数，我猜的，时间过去太久现在已经没遇到了。

二、上传组件 beforeUpload 未响应

被
:on-change=“fileChange”
或
:auto-upload=“false”
影响，自己看着解决吧。

三、el-popover样式无法直接修改和另一个超级大坑

原因：虽然你在f12中用以往的办法找到了它的dom，但是你修改不了也无法>>>穿透。该组件比较特殊。它的样式已经超脱五行之外，不在六界之中来了，它生成的div并不在当前组件中，和APP.vue组件div平级。
修改办法：
把样式中scope去掉，用自带方法popper-class取一个class名。
至于把scope去掉是否会引起别的错乱需要仁者见仁智者见智。
我是根据项目特点单独起了一个style容器的，不受scope管辖。

还有个大坑
在el-table中就着fixed属性使用时，会出来两个popover，还时灵时不灵，总之不能和fixed一起用。
你问我解决办法？对不起我也不知道，说服领导把表格里fixed的内容移到前面，取消fixed属性了。

四、elementui表单在弹窗打开初始进行校验

弹窗一打开，其中的表单就开始校验。
原因分析：实际需求中表单有初始赋值，当赋值为空或者null的时候触发了校验。
解决：监听一下，弹窗打开时，强行去掉校验

'dialogVisible'(newVal, oldVal){
   	if (newVal) {
   		this.$nextTick(()=>{
   			this.$refs.form.clearValidate();
   		})
   	}
 }

五、报错后子组件（弹窗组件）触发无效

父组件（列表）传导至子组件（弹窗）中的接口报错，子组件（弹窗）并没有弹出，再继续选中父组件列表中的数据点击后子组件无反应，且控制台无报错。

我日啊，我也不知道为什么会这样，猜测弹窗虽然没弹出来但是弹窗开关已经打开了，但是二次点击的时候组件失效，根本监测不到开关状态。

解决办法：子组件接口第一次就抛出错误后（不会有第二次报错，因为组件已经失效了），error中把子组件（弹窗）开关修改为false重置（参数关闭弹窗）。

我只是感觉应该这么改，事实证明有效，这大概就是传说中的语感（js语感vue语感[ku]）

六、谷歌浏览器使用key(ca)或其他情形下产生了跨域

解决办法：
1，打开浏览器，进入chrome://flags/页面
2，搜索Block insecure private network requests，设置为Disabled，点击下方Relaunch