大家好，又见面了，我是你们的朋友全栈君。
项目需求
点击某个按钮，将设置的目标内容(例如下载链接地址，电话号，微信号)复制到剪切板，可以在电脑/手机上任何地方粘贴
插件选择
clipboard.js:
1. 官方地址：clipboardjs.com
2. 引入方式：
- NPM 方式：
npm install clipboard --save
3. 使用方式(官方文档例子)：
HTML(target包括但不限于input)
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>复制代码JS
var clipboard = new ClipboardJS('.btn');
//成功回调
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
//失败回调
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});复制代码更多使用方式和功能请参考官方文档，这里只举例一个实用且常用的功能！
在 Vue 中使用
1. 安装：
npm install clipboard --save复制代码2. 引入：
import Clipboard from 'clipboard';复制代码3. template:
<button ref="copyButton" :data-clipboard-text="copyNumber"></button>复制代码如果不想显示 input 输入框，可把需要复制的内容使用 data-clipboard-text 挂载到按钮上
<input id="copyInput" readonly v-module="copyNumber"><button ref="copyButton" data-clipboard-target="copyInput"></button>复制代码如果需要显示 input 输入框，可以在 data-clipboard-target 填写输入框的 id 去复制输入框的内容
4. js
export default { data() { return { copyNumber: '18404960408' }; },
methods: { // 初始化复制插件 initClipboard() { const clipboard = new Clipboard(this.$refs.copyButton); clipboard.on('success', (e) => { console.log('复制成功，请在微信粘贴添加') }); clipboard.on('error', (e) => { console.log('复制失败，请再次尝试') }); } }, mounted() { this.initClipboard(); }
}复制代码转载于:https://juejin.im/post/5c80754ef265da2da23d5624
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/106944.html原文链接：https://javaforall.net
