对iview分页组件进行二次封装,添加跳转按钮
最近的一个项目要求使用iview进行页面的搭建。项目完成在测试的时候,测试人员说页面的分页组件缺少跳转到某一页的按钮。
我告诉他直接输完页码点回车就好了,但是测试说用户不知道回车怎么办。好吧,我还能说些什么呢,改吧,发现iview分页组件没有类似的效果。只能自己上手对iview组件进行改造了。。
尝试方案一:
有问题自然想到是度娘,网上的方案几乎都是,使用原生js的模拟事件,通过点击跳转按钮去模拟iview页码输入框的Enter事件。下图是网上的通用做法:
但是,却不太适用于公司的项目。
最终方案:
1.template代码
<div class="pagination">
<div class="page-content"></div>
<Page
:total="total"
:id="pageId"
:current