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

2016-01-12 19:56:01 +08:00
 kokdemo

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 更好啦)

8947 次点击
所在节点    分享创造
3 条回复
xylitolLin
2016-01-13 11:33:24 +08:00
那个 div 才是多余的吧 , 正确姿势难道不是这样 <a id="demo" href=""></a> ?
zhanfenghai
2016-08-12 15:59:13 +08:00
为什么要在 a 里面再加个 div 呢,很奇怪的事情
kokdemo
2016-08-12 22:26:50 +08:00
@zhanfenghai div 只是举例啊……实际上 img , li 都可以这么用的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/250240

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX