最近用 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')
希望能帮到你们
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.