vuejs实现点击复制文本到剪贴板-三种方案
vue中js实现点击复制文本到剪贴板-三种方案
因为在网上找了一些很杂乱 不适用 所以自己写一篇记录分享一下
vue中js实现点击复制文本到剪贴板-三种方案
效果:
方案一:使用原生API(clipboard)
首先,我们需要安装clipboard库,它是一个轻量级的JavaScript库,用于复制/粘贴文本到剪贴板。
命令行运行npm install clipboard --save进行安装。
npm install clipboard --save
使用该库实现代码如下:
<template>
<div>
<button @click="copyText">复制文本</button>
</div>
</template>
<script>
import clipboard from 'clipboard';
export default {
methods: {
copyText() {
let text = 'Hello World';
clipboard.writeText(text);
alert('已复制到剪贴板!');
}
}
}
</script>
方案二:使用v-copy指令
我们可以使用vue指令,使元素支持复制文本到剪贴板。
<template>
<div>
<button v-copy="text">复制文本</button>
</div>
</template>
<script>
export default {
data() {
return {
text: 'Hello World'
}
}
}
</script>
// 注册指令
Vue.directive('copy', {
bind: function(el, binding) {
el.$copy = function() {
const textarea = document.createElement('textarea');
textarea.value = binding.value;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('Copy');
document.body.removeChild(textarea);
}
el.addEventListener('click', el.$copy);
},
unbind: function(el) {
el.removeEventListener('click', el.$copy);
}
});
方案三:使用clipboard.js库
clipboard.js库是一个现成的插件,可以通过安装运用它来实现复制文本到剪贴板的功能。
命令行运行 npm install clipboard --save 进行安装。
npm install clipboard --save
使用clipboard.js实现代码如下:
<template>
<div>
<button class="copy-btn" data-clipboard-text="Hello World">复制文本</button>
</div>
</template>
<script>
import ClipboardJS from 'clipboard';
export default {
mounted() {
new ClipboardJS('.copy-btn');
}
}
</script>
方案三:使用clipboard.js库(vue3版)
安装 clipboard.js 库
可以使用 npm 或 yarn 安装 clipboard.js,命令如下:
npm i clipboard
# 或者
yarn add clipboard
完整代码如下:
<template>
<button class="copy-btn">复制</button>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import ClipboardJS from 'clipboard'
const clipboardText = ref('hello world')
const copyText = () => {
const clipboard = new ClipboardJS('.copy-btn', {
text() {
return clipboardText.value
}
})
clipboard.on('success', () => {
console.log('复制成功')
})
clipboard.on('error', () => {
console.log('复制失败')
})
}
onMounted(() => {
copyText()
})
</script>
以上三种方案,都可以实现复制文本到剪贴板的功能,具体应用中,可根据实际情景选择适合自己的方案。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanheieija
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01