V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kokdemo
V2EX  ›  分享创造

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

  •  
  •   kokdemo ·
    kokdemo · 2016-01-12 19:56:01 +08:00 · 8916 次点击
    这是一个创建于 3238 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 条回复    2016-08-12 22:26:50 +08:00
    xylitolLin
        1
    xylitolLin  
       2016-01-13 11:33:24 +08:00
    那个 div 才是多余的吧 , 正确姿势难道不是这样 <a id="demo" href=""></a> ?
    zhanfenghai
        2
    zhanfenghai  
       2016-08-12 15:59:13 +08:00
    为什么要在 a 里面再加个 div 呢,很奇怪的事情
    kokdemo
        3
    kokdemo  
    OP
       2016-08-12 22:26:50 +08:00
    @zhanfenghai div 只是举例啊……实际上 img , li 都可以这么用的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2808 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:34 · PVG 22:34 · LAX 06:34 · JFK 09:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.