vue真难啊

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sg202060520/article/details/78785407
1. 父子组件传递参数时,不要用computed,computed在子组件没有加载好就执行了。
2. 子组件接受一个父组件传递的对象时,如果父组件不重新赋值,子组件watch不到变化。(感觉是废话)
3. 
* `Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
* `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。


样式问题
1. element-UI部分组件内部的样式调整受到style标签的scoped属性影响(element-UI没有加作用域属性),需要将样式写到不带scoped的style标签下,lang="less"可以继续使用.以下功能需要另写,比如:
1) 表格组件的行设置背景色
2) 其他情况见各个组件问题总结
2. table组件问题总结:
1) 表格行设置背景色:el-table加属性:row-class-name="tableRowClassName";vue的methods增加tableRowClassName方法;tableRowClassName方法返回一个样式名称(字符串)(比如tableRow);样式设置不要在带scoped的style标签下
2) 表格行hover设置背景色:element-UI通过hover状态下的所有td设置的背景色,覆盖即可,比如:.tableRow:hover > td{background: #666}
3) loading背景色覆盖el-loading-mask类
4) 去除边框.el-table{border: none;}
5) 表格body右侧白线,目前定位到.el-table::before反复生成,覆盖也无效


组件坑
1. 使用vue-silder,被el-transision包裹,且创建时被折叠,导致打开时silder的初始值不生效,且组件不可用
   1)先排除代码问题,解决console的红叉叉;查看API看是否变量有错;再把最简单的例子的数据加进来,不行;再把例子放到别的页面,可以;经过排查,初步定为是位置问题
   2)上网搜索看是否有人遇到这个坑,结果果真有,还指出了使用场景,和我的一样,帖子给出提示transform: translateX(-8px);再审查元素看了下样式,发现css3的transform: translateX(-8px),明显不对,顺便学习了下css3这个属性;
   3)找到原因之后,查看源码,发现代码就一个文件,未格式化也就600行左右,考虑到需要修改,干脆引进项目使用和修改;接着通过console.info语句或者debugger跟踪代码流程学习;最终改好。
   基础技术点:如果隐藏(display:none) this.$refs.elem.offsetWidth等于0,而组件通过computed 计算gap使用了this.$refs.elem.offsetWidth,以后一直为0,导致展开时间滚动条时计算错误。
展开阅读全文

没有更多推荐了,返回首页