一件蛋疼的事 v-click

[jiangjiu]

一件蛋疼的事 v-click

之前写完博客的响应式布局就在想怎么优化移动端300ms 问题，简单搜索以后觉得自己写个 touchstart-touchend/click 自动判断绑定的插件吧，然后就写了，写了就蛋疼了。。。

vue-router 的 v-link 默认绑定 click 事件，根本不给机会。。。意味着这个插件的写法没法和 vue-router 一起使用，博客上只好上 fastclick 了，虽然我觉得我这么 low的博客根本没必要用这么高大上的东东，不过压缩后只有不到4k，**(哎呦这个库还不错！)**嗯。

写都写了，发出来吧~主要是抄袭了网红二哲的 v-tap，尤大大的 v-touch,自己写插件来练练手，又给上帝交了学费。

v-click 简介

思路就是根据 navigator.userAgent 信息判断是否是 pc 端，从而绑定相应的事件。暂时只有 touchstart 和 touchend，不过好像应该判断一下是否pageX需要移动？okok Anyway，暂时用不到，拖延症开始高并发了。

安装

// main.js （v-click.js地址都不好意思发出来了）
import VueClick from './directives/v-click.js'

Vue.use(VueClick)

心路历程（被虐の路）

二哲在 segmentfault 发文说没查到 isFn 这个属性，特意搜了一下还是有文档的，翻译出来放这儿。

Directives In Depth

Vue.js 鼓励开发者从行为中分离数据，所以实例方法应该写在 methods 里而不是 data 对象中。这会导致 data 对象中的函数将被忽略，同时普通指令也无法绑定这些函数。

如果想在自定义指令中传入函数，你需要增加 isFn 选项:

Vue.directive('my-handler', {
    isFn: true, // important!
    bind: function () {
        // ...
    },
    update: function (handler) {
        // the passed in value is a function
    },
    unbind: function () {
        // ...
    }
})

增加isFn:true这个选项也使自定义指令像 v-on 指令一样，可以接受内联表达式。

参考资料

• vue-router 文档
• 网红二哲大大的 vue-tap
• 尤大大的 vue-touch

最后

fastclick 真爽哈哈哈哈哈