作为一名前端菜鸟,之前没用过Ant Design of Vue,使用起来还真有点不适应,对比其他的前端UI库,感觉ant-vue组件封装的比较完善的,很多功能都有,可以说是比较智能了,就是有些地方有些奇奇怪怪的bug,望君共勉。
a-select
关于下拉组件的placeholder,当你设置了他的defaultValue或者v-model值得时候,设置了默认值时,他的placeholder就不会显示,尽管他和input的值都设置为空,但他就比较皮,后来我设置null也没用,直到我设置了undefined。。。显示了,这个歪门邪道啊。
还是a-select,业务上有一个需求,说是要在这个框里输入值,然后在后台去搜索,返回回来, 在选,我一开始没注意看文档,通过绑定了一个keyup事件,实现了远程搜索的功能,但是有bug,发现后台搜索回来的值是正确的,也赋值上了,但是在页面上就是不显示,为此,我做了尝试,加了万能的$forceUpdate(),结果还是不行,我就纳闷了,为啥还不行,问我老大,我老大之前也没遇到这个问题,继续翻文档,发现他有一个自带的远程搜索API,我赶紧安上,结果还是不行,我。。。,纳闷,尝试N次后发现他要和:filter-option="false"配套使用,这反人类的玩意。
前几天测试提了一个bug,说是当页面滚动的时候,选择框会停浮在页面上,不会跟着滚动,解决办法:
将这段代码写到select里,就好,注意:select要设置position: relative;
:getPopupContainer="
triggerNode => {
return triggerNode.parentNode || document.body;
}
"
a-transfer
乍一看,其实这玩意还蛮好使用的,就是太不智能了,这么好用的东西居然没有滑动加载更多?这,数据这么多,肯定用分页的,继续尝试,发现有一个scroll的事件,于是赶紧开始我的滑动加载更多,一开始我设置了一个flag,当没有下一页时就设置为false,在scroll的时候判断这个flag是否为true,如果true就加载更多,否则不加载,然后我鼠标一滚动,请求接口就炸了,一下发了十几条,在上一次请求没回来,下一次就发出去,这不行啊。得做节流(当持续触发事件时,保证一定时间段内只调用一次事件处理函数)啊,嘤嘤嘤。简单的写一个setTimeout,设置时间为1000ms,即在滚动过程中1s请求一次,模拟了一个加载更多,
a-table
这个比较element,封装的算是挺好了,还集成了分页,但是如果不要分页,就尴尬了,仔细看文档,发现得将pagination设置为false。。很莫名其妙啊
a-menu
用了菜单组件之后基本上会有展开和折叠的操作,但但你展开二级菜单然后再折叠这个菜单的时候,你会发现这个二级菜单居然不跟随,光秃秃在外面,让我在风中凌乱,这也太骚了吧。于是百度一波,发现,你只能自己手动设openKeys=[],然后他就收起来了,是不是很神奇?现在问题又来了,你设置为空之后,展开之后这个二级菜单就不会展开了,所以你得设置一个tempArr,折叠的时候将openKeys赋值给tempArr,展开的时候将tempArr赋值给openKeys这样就可以啦,这里有一点要注意,a-menu-item里展示title的只能放span标签哦,如果你要还是要放div的话,那你将这个div设置display: inline-block也可以。
欢迎大家在下方留言,补充不足,本人也会持续更新~~