vue，自定义复制指令。_心得技巧

发布时间：2022-06-23 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vue，自定义复制指令。，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在项目里面经常有着一些复制数据的需求，对次封装了一个copy指令。

代码如下：

export default {

bind(el, { value }) {

el.$value = value;

el.handleClick = () => {

if (!el.$value) {

return console.log('暂无数据');

}

let input = document.createElement('input');

input.cssText = 'position:absolute;z-index:-99999';

input.readOnly = 'readOnly';

document.body.appendChild(input);

input.select();

let result = document.execCommand('copy');

if (result) {

console.log('复制成功');

document.body.removeChild(input); //复制成功后删除标签，避免多次点击复制创建无用标签。

}

};

el.addEventListener('click', handleClick); //监听按钮点击事件

componentUpdated(el, { value }) {

el.$value = value;

unbind(el) {

el.removeEventListener('click');

};

vue，自定义复制指令。

脚本宝典总结

以上是脚本宝典为你收集整理的vue，自定义复制指令。全部内容，希望文章能够帮你解决vue，自定义复制指令。所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

猜你在找的心得技巧相关文章