Vue 编写一个长按指令

英文:Obaseki Nosa   译文:kingrychen

github.com/OFED/translation/issues/3



有没有想过只需按住一个按钮几秒钟就能在你的 Vue 应用中触发一个功能?


有没有想过创建一个按钮,按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?


想过?太好了,英雄所见略同。


本文就是讲解如何在按下(或者按住)一个按钮时,既执行一个函数,又清除输入。


首先,我会讲解如何使用纯 JS 实现。而后也会创建一个 Vue 指令。


请系好安全带。好戏在后头呢。


原理


要实现长按,用户需要按下并按住按钮几秒钟。


想通过代码模拟这一效果,我们需要在鼠标“点击”按下按钮时,启动一个计时器监听用户按下的时长,如果时间超过我们期望的时长,就执行相应的函数。


非常简单!然而,我们需要知道用户何时按住按钮。


如何实现


当用户点击按钮时,在点击事件之前会触发另外两个事件: mousedown 和 mouseup。


当用户按下按钮时触发 mousedown 事件,用户松开按钮时调用 mouseup 事件。


我们需要做的是:


  • mousedown 事件触发时,启动计时器。

  • 一旦 mouseup 事件在预期的 2 秒前被触发,就清除计时器,不要执行相应的函数。就当作一个普通的点击事件。


  • 只要计时器在我们预设的时间内没有被清除,即 mouseup 事件没有被触发——那么可以断定用户没有释放按钮。因此,可以判定为一次长按,可以执行关联的函数。


    实践


    让我们深入代码,完成这一功能。


    首先,我们必须定义三件事,即:


  • 一个 变量 用于存储计时器。

  • 一个 启动 功能函数,用于启动计时器。

  • 一个 取消 功能函数,用于取消计时器。


  • 变量


    这个变量主要用来保存 setTimeout 的值,以便当鼠标 mouseup 事件触发时我们可以取消它。


    let pressTimer = null;


    我们把变量值设置为 null 是为了在执行取消操作前,检查这个变量的值判断当前是否有一个正在运行的计时器。


    启动函数


    这个函数包括一个 setTimeout,它是 JavaScript 中的一个基本方法,允许在特定时间之后执行一个函数。


    注意,click 事件执行的过程中,会触发另外两个事件。但是我们需要启动计时器的是 mousedown 事件。如果只是点击事件,不需要启动计时器。


    // 创建计时器 ( 1s之后执行函数 )

    let start = (e) => {

        // 如果是点击事件,不启动计时器

        if (e.type === 'click' && e.button !== 0) {

            return;

        }

        // 在启动一个定时器之前确保没有正在运行的计时器

        if (pressTimer === null) {

            pressTimer = setTimeout(() => {

                // 执行任务 !!!

            }, 1000)

        }

    }


    取消函数


    这个函数见名知意,用来取消启动函数创建的 setTimeout。


    要取消 setTimeout ,可以使用 JavaScript 中的 clearTimeout 方法,它主要用来清除 setTimeout() 方法设置的计时器。


    在使用 clearTimeout 之前,需要检查 pressTimer 变量是否为 null。如果没有为 null,意味着有一个正在运行的计时器。因此,我们需要先清除它,并且将 pressTimer 变量设置为 null。


    let cancel = (e) => {

        // 检查 pressTimer 的值是否为 null

        if (pressTimer !== null) {

            clearTimeout(pressTimer)

            pressTimer = null

        }

    }


    一旦 mouseup 事件触发,这个函数就会被调用。


    设置触发器


    剩下的就是将事件监听器添加到想要长按效果的按钮上。


    addEventListener("mousedown", start);

    addEventListener("click", cancel);


    以上代码合到一起是这样:


    // 定义变量

    let pressTimer = null;


    // 创建计时器( 1秒后执行函数 )

    let start = (e) => {


        if (e.type === 'click' && e.button !== 0) {

            return;

        }


        if (pressTimer === null) {

            pressTimer = setTimeout(() => {


                // 执行任务 !!!


            }, 1000)

        }

    }


    // 停止计时器

    let cancel = (e) => {


        // 检查是否有正在运行的计时器

        if ( pressTimer !== null ) {

            clearTimeout(pressTimer);

            pressTimer = null;

        }

    }


    // 选择 id 为 longPressButton 的元素

    let el = document.getElementById('longPressButton');


    // 添加事件监听器

    el.addEventListener("mousedown", start);


    // 长按事件取消,取消计时器

    el.addEventListener("click", cancel);

    el.addEventListener("mouseout", cancel);


    用 Vue 指令包装


    创建 Vue 指令时,可以创建全局或局部指令,本文中,我们采用全局指令。


    首先,我们必须声明自定义指令的名称。


    Vue.directive('longpress', {


    })


    这就注册了一个名为 v-longpress 的全局自定义指令。


    接下来,我们添加带参数的 bind 钩子函数,它允许我们引用指令绑定的元素,获取传递给指令的值,并标识指令使用的组件。


    Vue.directive('longpress', {

        bind: function(el, binding, vNode) {


        }

    })


    接下来,我们在 bind 函数中添加长按功能的代码。


    Vue.directive('longpress', {

        bind: function(el, binding, vNode) {


            // 定义变量

            let pressTimer = null;


            // 定义函数处理程序

            // 创建计时器( 1秒后执行函数 )

            let start = (e) => {


                if (e.type === 'click' && e.button !== 0) {

                    return;

                }


                if (pressTimer === null) {

                    pressTimer = setTimeout(() => {


                        // 执行任务 !!!


                    }, 1000)

                }

            }


            // 取消计时器

            let cancel = (e) => {


                // 检查是否有正在运行的计时器

                if ( pressTimer !== null ) {

                    clearTimeout(pressTimer);

                    pressTimer = null;

                }

            }


            // 添加事件监听器

            el.addEventListener("mousedown", start);


            // 取消计时器

            el.addEventListener("click", cancel);

            el.addEventListener("mouseout", cancel);

        }

    })


    接下来,我们需要添加一个函数来运行传递给 longpress 指令的方法。


    Vue.directive('longpress', {

        bind: function(el, binding, vNode) {


            // 定义变量

            let pressTimer = null;


            // 定义函数处理程序

            // 创建计时器( 1秒后执行函数 )

            let start = (e) => {


                if (e.type === 'click' && e.button !== 0) {

                    return;

                }


                if (pressTimer === null) {

                    pressTimer = setTimeout(() => {

                        // 执行函数

                        handler();

                    }, 1000)

                }

            }


            // 停止计时器

            let cancel = (e) => {


                // 检查是否有正在运行的计时器

                if ( pressTimer !== null ) {

                    clearTimeout(pressTimer);

                    pressTimer = null;

                }

            }


            // 运行函数

            const handler = (e) => {

                // 执行传递给指令的方法

                binding.value(e)

            }


            // 添加事件监听器

            el.addEventListener("mousedown", start);


            // 取消计时器

            el.addEventListener("click", cancel);

            el.addEventListener("mouseout", cancel);

        }

    })


    现在,可以在 Vue 应用中使用这个指令了,除非使用者给指令传入的值不是一个函数。因此,我们需要通过警告反馈给使用者。


    为了反馈给使用者,我们在 bind 函数中添加了以下内容:


    // 确保提供的表达式是函数

    if (typeof binding.value !== 'function') {

        // 获取组件名称

        const compName = vNode.context.name;

        // 将警告传递给控制台

        let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;

        if (compName) { warn += `Found in component '${compName}' ` }


        console.warn(warn);

    }


    最后,如果这个指令也适用于触屏设备,那会是极好的。因此,我们添加了 touchstart、touchend 和 touchcancel 事件监听器。


    最终代码如下:


    Vue.directive('longpress', {

        bind: function(el, binding, vNode) {


            // 确保提供的表达式是函数

            if (typeof binding.value !== 'function') {

                // 获取组件名称

                const compName = vNode.context.name;

                // 将警告传递给控制台

                let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;

                if (compName) { warn += `Found in component '${compName}' `}


                console.warn(warn);

            }


            // 定义变量

            let pressTimer = null;


            // 定义函数处理程序

            // 创建计时器( 1秒后执行函数 )

            let start = (e) => {


                if (e.type === 'click' && e.button !== 0) {

                    return;

                }


                if (pressTimer === null) {

                    pressTimer = setTimeout(() => {

                        // 执行函数

                        handler();

                    }, 1000)

                }

            }


            // 取消计时器

            let cancel = (e) => {


                // 检查计时器是否有值

                if ( pressTimer !== null ) {

                    clearTimeout(pressTimer);

                    pressTimer = null;

                }

            }


            // 运行函数

            const handler = (e) => {

                // 执行传递给指令的方法

                binding.value(e)

            }


            // 添加事件监听器

            el.addEventListener("mousedown", start);

            el.addEventListener("touchstart", start);


            // 取消计时器

            el.addEventListener("click", cancel);

            el.addEventListener("mouseout", cancel);

            el.addEventListener("touchend", cancel);

            el.addEventListener("touchcancel", cancel);

        }

    })


    现在可以在 Vue 组件里使用了:


    <template>

        <div>

            <button v-longpress="incrementPlusTen" @click="incrementPlusOne">{{value}}</button>

        </div>

    </template>


    <script>

    export default {

        data() {

            return {

                value: 10

            }

        },

        methods: {

            // 增加1

            incrementPlusOne() {

                this.value++

            },

            // 增加10

            incrementPlusTen() {

                this.value += 10

            }

        }

    }

    </script>


    . . .


    如果你想知道更多关于 自定义指令、可用的 钩子函数、可以传递到这个钩子函数中的 参数、函数简写 的信息, 参照 @vuejs 官方文档,作者做了很好的解释。

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 211,884评论 6 492
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 90,347评论 3 385
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 157,435评论 0 348
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 56,509评论 1 284
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 65,611评论 6 386
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 49,837评论 1 290
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 38,987评论 3 408
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 37,730评论 0 267
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 44,194评论 1 303
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 36,525评论 2 327
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 38,664评论 1 340
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 34,334评论 4 330
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 39,944评论 3 313
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 30,764评论 0 21
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 31,997评论 1 266
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 46,389评论 2 360
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 43,554评论 2 349

    推荐阅读更多精彩内容