longpress.js

export default {
    install(Vue, options = {
        time: 2000
    }) {
        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 afunction, 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();
                        }, options.time)
                    }
                }
                // 取消计时器
                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);
            }
        })
    }
}

在main.js中引入

import LongPress from './longpress.js'
Vue.use(LongPress, { time: 1000 })
//time:长按时长，可自行定义

组件或页面中使用

<div v-longpress="() => copyContent(item)"></div>

copyContent函数

copyContent(str) {
  var input = document.createElement('input');
  input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
  input.setAttribute('value', str);
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}