最近又复习复习Vue指令部分，写点儿常用的指令。忽然想到长按指令不存在进度效果，故此写一个。

展示效果：

代码实现：

/**
 * 长按指令，两秒触发长按
 * @author maple
 * @time 2023-04-10
 * @param value {function} 外部方法
 * */
let timer,
    progressTimer,
    progressIndex,
    start,
    cancel,
    clear;

export default {
    inserted(el, {value}) {
        progressIndex = 0;
        el.style.position = 'relative';
        let progress = document.createElement('span');
        progress.style.position = 'absolute';
        progress.style.pointerEvents = 'none';
        progress.style.top = '0';
        progress.style.left = '0';
        progress.style.width = '0px';
        progress.style.height = el.offsetHeight + 'px';
        progress.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
        start = function () {
            el.appendChild(progress);
            progressTimer = setInterval(() => {
                progressIndex++;
                progress.style.width = progressIndex + '%';
            }, 20);
            timer = setTimeout(() => {
                value();
                clearInterval(progressTimer);
                clear();
            }, 2000);
        };
        cancel = function () {
            if (progressTimer) {
                clear();
                clearInterval(progressTimer);
            }
            if (timer) {
                clear();
                clearTimeout(timer);
            }
        };
        clear = function () {
            progressIndex = 0;
            progress.remove();
        };
        el.addEventListener('mousedown', start);
        el.addEventListener('mouseup', cancel);
        el.addEventListener('mouseout', cancel);
    },
    unbind(el) {
        el.removeEventListener('mousedown', start);
        el.removeEventListener('mouseup', cancel);
        el.removeEventListener('mouseout', cancel);
    }
}

相关问题：

这里还存在一个自定义的问题，我的建议是如果系统中存在自定义自定义样式需求，则新增几个modifiers，可区分开就好。