vue 實現一鍵複製功能(兩種方式)
阿新 • • 發佈:2022-05-20
方法 一 :
<div class="mask-cont">
<p><input id="input" /></p>
<button class="btns" @click="copyToClip">複製</button>
</div>
copyToClip:function() {
let that = this
var input = document.getElementById("input");
input.value = that.address; // 要複製的文字框的內容(此處是後端返回的內容)
input.select(); // 選中文字
document.execCommand("copy");
alert("複製成功")
}
方法二:下載外掛
npm install --save vue-clipboard2
main.js檔案中 import Vue from 'vue' import VueClipBoard from 'vue-clipboard2' Vue.use(VueClipBoard)
使用一:
<template> <div> <div> <textarea name="複製內容" id cols="30" rows="10" v-model="value"></textarea> <button v-clipboard:copy="value" v-clipboard:success="firstCopySuccess" v-clipboard:error="firstCopyError" >第一種方式複製</button> </div> <div> <textarea name="貼上內容"id cols="30" rows="10"></textarea> </div> </div> </template>
<script> export default { data() { return { value: "A simple vuejs 2 binding for clipboard.js!" }; }, methods: { firstCopySuccess(e) { console.log("copy arguments e:", e); alert("複製成功!"); }, firstCopyError(e) { console.log("copy arguments e:", e); alert("複製失敗!"); } } }; </script>
使用二:
<button @click="seccendCopy">第二種方式複製</button>
seccendCopy() {
this.$copyText(this.value).then(
function(e) {
console.log("copy arguments e:", e);
alert("複製成功!");
},
function(e) {
console.log("copy arguments e:", e);
alert("複製失敗!");
}
);
}
<script>export default { data() { return { value: "A simple vuejs 2 binding for clipboard.js!" }; }, methods: { firstCopySuccess(e) { console.log("copy arguments e:", e); alert("複製成功!"); }, firstCopyError(e) { console.log("copy arguments e:", e); alert("複製失敗!"); } }};</script>————————————————版權宣告:本文為CSDN博主「Life a dream」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。原文連結:https://blog.csdn.net/Li8L9xF/article/details/123194877