1.纯js实现复制到剪切板
<div style="padding:20px">
<el-input v-model="copyValue" id="copyText" style="width:400px;"></el-input>
<el-button type="primary" @click="handleClipboard1()">copy</el-button>
<p class="title">粘贴一下:</p>
<el-input type="textarea" :rows="5" style="width: 400px;" v-model="pasteValue"></el-input>
</div>
<script>
export default {
data() {
return {
copyValue: "lhyyzwdxka",
pasteValue: ""
};
},
methods: {
handleClipboard1() {
let value = document.getElementById('copyText').value
this.clipboard(value)
},
clipboard(textCopyed){
const inputElement = document.createElement("input") //构建input
inputElement.value = textCopyed //设置内容
document.body.appendChild(inputElement) //添加临时实例
inputElement.select() //选择实例内容
document.execCommand('Copy') //执行复制
document.body.removeChild(inputElement) //删除临时实例
this.$message.success("已复制到剪切板")
}
}
};
</script>
2.使用clipboard.js插件
安装:npm install clipboard --save
引入:import Clipboard from "clipboard
<el-input v-model="copyValue" id="foo" style='width:400px;'></el-input>
<el-button type="primary" data-clipboard-action="copy" data-clipboard-target="#foo" id="copyBtn" @click="handleClipboard2()">copy</el-button>
<p style="padding:10px 0" class="title">粘贴一下:</p>
<el-input type="textarea" :rows="5" style="width: 400px;" v-model="pasteValue"></el-input>
<script>
import Clipboard from "clipboard";
export default {
data() {
return {
copyValue: "lhyyzwdxka",
pasteValue: ""
};
},
methods: {
handleClipboard2() {
let that = this
let clipboard = new Clipboard("#copyBtn");
clipboard.on("success",function(e){
that.$message.success("复制成功")
e.clearSelection();
})
},
}
};
</script>
属性说明:
data-clipboard-action="copy/cut"
:指明你想要复制还是剪切内容,copy为复制操作,cut为剪切操作。
data-clipboard-target="#foo"
:要复制的给目标元素。