题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。
在实际项目开发中，用到复制的地方还挺多，如一些链接过长不显示，点击一下载复制到剪切板或者是将复制的内容自动填到其他组件中，这个复制功能 有些是纯html页面，有些是vue项目，本文章来总结常用的三种复制方式。
| github? | xx | 百度同步 |
|---|---|---|
| CSDN | 网易云课堂教程 | 掘金 |
| 知乎 | Flutter系列文章 | 头条同步 |
1 使用 clipboard 组件来实现复制功能
#1.安装依赖
npm install --save v-clipboard
//2.在main.js中引入 并注册组件
import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)
///3.使用
<template>
<button v-clipboard="copyContent"
v-clipboard:success="clipboardSuccessHandler"
v-clipboard:error="clipboardErrorHandler">
Copy to clipboard
</button>
</template>
export default {
data() {
return {
//定义复制成功的文本记录变量
copyContent:''
}
},
methods: {
//定义复制失败的回调
clipboardSuccessHandler ({
value, event }){
console.log('success', value);
this.$message.success("已复制");
},
//定义复制成功的回调方法
clipboardErrorHandler ({
value, event }) {
console.log('error', value)
}
}
}
2 来一段 JS
<el-table-column
prop="versionUrl"
header-align="center"
align="center"
label="升级包下载地址">
<template slot-scope="scope">
<el-button type="primary" plain @click="copyUrl(scope.row.versionUrl)">点击复制</el-button>
</template>
</el-table-column>
<script>
export default {
methods: {
///定义点击复制的功能
copyUrl(url){
//创建一个 Input标签
let oInput = document.createElement('input');
oInput.value = url;
document.body.appendChild(oInput);
oInput.select(); // 选择对象;
console.log(oInput.value)
// 执行浏览器复制命令
/// 复制命令会将当前选中的内容复制到剪切板中
/// 如这里构建的 Input标签
document.execCommand("Copy");
this.$message({
message: '复制成功',
type: 'success'
});
///复制成功后再将构造的标签 移除
oInput.remove()
},
}
3 使用 clipboard js 方式
第一步是引入 clipboard 代码如下：
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
2 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
第二步就是使用了
<body>
<div>
<span class="app_title">APP号：</span>
<input type="text" class="app_v" value="下载链接" id="target1" readonly="" />
</div>
<button class="app_btn" data-clipboard-action="copy" data-clipboard-target="#target1" id="copy_btn1">复制</button>
</body>
然后对应的 JS 代码如下 ：
<script>
// 获取需要复制的内容 jquery 语法
let targetText1 = $("#target1").text();
// 在点击复制按钮上new一个 Clipboard 对象
let clipboard1 = new Clipboard('#copy_btn1');
//然后设置复制成功的回调监听
clipboard1.on('success', function (e) {
// 复制成功时
// 清除选中的文字的选择状态
e.clearSelection();
alert('复制成功')
});
</script>
本公众号会首发系列专题文章，付费的视频课程会在公众号中免费刊登，在你上下班的路上或者是睡觉前的一刻，本公众号都是你浏览知识干货的一个小选择，收藏不如行动，在那一刻，公众号会提示你该学习了。
