V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
fszaer
V2EX  ›  JavaScript

修复 materialize tabs 组件在 vue 的问题

  •  
  •   fszaer · 2016-03-02 20:34:03 +08:00 · 2684 次点击
    这是一个创建于 3172 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    最近用 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')

    希望能帮到你们

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2177 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:13 · PVG 00:13 · LAX 08:13 · JFK 11:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.