1、Element UI的Tree组件中在加载之后默认选中指定的节点
当获取数据源data后通过this.$refs.menuTree.setCurrentKey()指定是没有效果的,原因就是树的相关DOM未渲染完,因此需要使用this.$nextTick(()=>{}),以确保DOM已渲染完全(问题不大,但最主要的是在谷歌浏览器中直接调用也是正常的,但是在IE浏览器直接调用就无法渲染选中效果了,这才是坑哦。。。)
2、强制换行和禁止换行
(1)word-break: break-all
假设div宽度为450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。
(2)word-wrap: break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,他会自动把整个单词放到下一行,而不会把单词截断掉。
(3)white-space: pre-wrap
对于强制换行,用word-wrap: break-word;就可以了。
(4)white-space: nowrap
禁止换行。
text-overflow: ellipsis;让多出的内容以省略号"..."来表达。但是这个属性主要用域IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis;而Firfox浏览器没有这个功能,多出的内容只能隐藏起来。
3、disabled的兼容问题
IE10及以上:
![6130d2f7707642a3c2cafa6011298b3d.png](https://i-blog.csdnimg.cn/blog_migrate/88412aab7dc808fdfeb8e4ed83e575ba.png)
IE9:
![275c701f4fe3f518e0723907ae4b463a.png](https://i-blog.csdnimg.cn/blog_migrate/48aefb4722af4dfef0a64032fb711e12.png)
IE9及以下无法改变disabled状态的标签内容的字体颜色,在网上找了很多答案都没什么效果,那就只能曲线救国了,像input、textarea等输入型表单标签可以通过readOnly、unselectable="on"组合进行使用,至于按钮等标签的话,那就只能纯手撸了,比较简单,这里不做详细介绍了。
4、vue中data初始化对象问题
![b3728f665354a61d27c8fa28ca4719ad.png](https://i-blog.csdnimg.cn/blog_migrate/0a6be0913b9f69a648b63ac60149a658.jpeg)
场景是这样的:
在父组件.vue中对子组件所要传的对象进行添加参数,如下所示:
![4cef40a8e0d0dc885841974cb1982c9b.png](https://i-blog.csdnimg.cn/blog_migrate/242a3da72475088410c19d18de24d7aa.png)
这里dataObj和flag都是data中所声明的数据对象,但是dataObj初始化时是没有disabled的,当后续通过修改flag改变<myComponent />组件状态是没有效果的,具体原因就是上面截图中官网所述,disabled并没有称为响应式的属性。
简简单单的随笔小记,希望可以通过不断地总结,不断地成长!