一件蛋疼的事 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 指令一样,可以接受内联表达式。

参考资料

最后

fastclick 真爽哈哈哈哈哈

赞(1) 打赏
未经允许不得转载:exp经验网 » 一件蛋疼的事 v-click
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

寻找有兴趣的合伙人,加入我们吧!

加入我们