修复 materialize tabs 组件在 vue 的问题

2016-03-02 20:34:03 +08:00
 fszaer

前言

最近用 vue 捣鼓东西,其中用到还用到 materialize 这个 md 框架
不过 materialize tabs 组件在 vue 中不能很好工作......

原因是 tabs 组件是通过href锚点标记,来匹配 tab 主体元素,例如官方文档中例子

<ul class="tabs">
    <li class="tab col s3"><a href="#test1">Test 1</a></li>
</ul>
<div id="test1" class="col s12">Test 1</div>

假如你还开启了 vue 的 router
这样当你点击 a 标签时,由于 router 的路径被锚点改变而导致页面错乱

修复这个问题也很简单,因为只要不使用href就可以了,
我们完全可以用data-href 自定义属性来替代,这样就不会因为锚点干扰 router 路径
同时将 tabs 组件源码的中关于获取href的值的语句替换为获取data-href,就好了。

像这样

this.hash=>$(this).data('href')

希望能帮到你们

2544 次点击
所在节点    JavaScript
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/260622

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX