V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
fszaer

修复 materialize tabs 组件在 vue 的问题

  •  
  •   fszaer · Mar 2, 2016 · 3348 views
    This topic created in 3712 days ago, the information mentioned may be changed or developed.

    前言

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

    希望能帮到你们

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1097 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 23:55 · PVG 07:55 · LAX 16:55 · JFK 19:55
    ♥ Do have faith in what you're doing.