V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
kokdemo

写了一个简单的 vue.js 插件,让 dom 中的链接和跳转更简单!

  •  
  •   kokdemo ·
    kokdemo · Jan 12, 2016 · 9443 views
    This topic created in 3758 days ago, the information mentioned may be changed or developed.

    github 地址

    https://github.com/kokdemo/vue-href


    干啥用的?

    一个 vue.js 的指令插件,可以让你给 [任何 dom ] 加上一个跳转的事件。 属于那种并没有什么卵用但是写起来还蛮省事的插件。


    用起来什么效果?

    <div id="demo" v-href:blank="'http://google.com'">
        click me to open new tab to google
    </div>
    

    这段和以下的代码基本是等价的:

    <a href="http://google.com" target='_blank'>
        <div id="demo">
            click me to open new tab to google
        </div>
    </a>
    

    这样就减少了一层 a 的嵌套,写起来也能省了不少事情(比如扣 css 什么的)。然后我自己也预设了一些快速的写法,比如:

    v-href:b     等价于     v-href:blank
    

    考虑到链接上会有一些打点啊什么的,我实现了一个比较挫的 before 和 after 回调,使用方法如下:

    v-href="['http://google.com',before,after]"
    

    其中的 before 和 after 就是回调函数啦。


    PS

    还有更多的介绍都写在了 github 的 readme 里面,希望大家提提建议和意见。(当然能给个 star 更好啦)

    3 replies    2016-08-12 22:26:50 +08:00
    xylitolLin
        1
    xylitolLin  
       Jan 13, 2016
    那个 div 才是多余的吧 , 正确姿势难道不是这样 <a id="demo" href=""></a> ?
    zhanfenghai
        2
    zhanfenghai  
       Aug 12, 2016
    为什么要在 a 里面再加个 div 呢,很奇怪的事情
    kokdemo
        3
    kokdemo  
    OP
       Aug 12, 2016
    @zhanfenghai div 只是举例啊……实际上 img , li 都可以这么用的
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5050 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 09:47 · PVG 17:47 · LAX 02:47 · JFK 05:47
    ♥ Do have faith in what you're doing.