网站产品展示,北京东城网站建设,做网站需要先学什么,网站后台生成静态页面背景#xff1a;使用clipboard时候想提出组件#xff0c;后续发现第一次没反应第二次成功 原理#xff1a;clipboard是创建一个dom监听#xff0c;然后点击dom时候复制并触发回调函数。所以第一次点击时候是创建监听#xff0c;第二次点击才能被监听到 解决方案#xff1…背景使用clipboard时候想提出组件后续发现第一次没反应第二次成功 原理clipboard是创建一个dom监听然后点击dom时候复制并触发回调函数。所以第一次点击时候是创建监听第二次点击才能被监听到 解决方案 1、不提出组件在mounted中初始化创建监听不使用因为不方便提出公共方法组件 2、在每次点击时候多加一次点击不推荐不确定有无性能问题毕竟创建了多个 3、每次点击执行一遍创建监听-触发监听- 销毁监听的整个生命周期保证每次点击完毕后都卸载掉监听。
import Clipboard from clipboard
// 复制粘贴插件
let clipboard null
// init方法 创建监听
const clipboardInit (content, clickEvent) {clipboard new Clipboard(clickEvent.target, {text: () content})// 成功或失败时候触发回调函数调用reset释放内存clipboard.on(success, () {console.log(复制成功);clipboardReset()})clipboard.on(error, () {console.log(复制失败)clipboardReset()})
}
// reset方法 释放内存
const clipboardReset () {clipboard.destroy()clipboard null
}// 复制粘贴 content要复制的内容clickEvent点击事件
const copyToClipboard (content, clickEvent) {// init初始化监听clipboardInit(content, clickEvent)// 触发监听clipboard.onClick(clickEvent)// 释放内存在成功或失败的回调函数中
}
export {copyToClipboard
}使用示例
t-button varianttext clickhandleCopy :data-clipboard-textreturnInfo.value点击复制/t-buttonhandleCopy(e) {copyToClipboard(this.returnInfo.value,e)
}
