大家好,又见面了,我是你们的朋友全栈君。
项目需求
点击某个按钮,将设置的目标内容(例如下载链接地址,电话号,微信号)复制到剪切板,可以在电脑/手机上任何地方粘贴
插件选择
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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106944.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...