原理
<template>
<div class="about">
<input type="text" v-model="text">
<button @click="Copy">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
text:'' //定义复制变量
}
},
methods:{
//定义方法
Copy(){
let inputs=document.createElement("input") //创建节点
inputs.value=this.text //给节点赋值
document.body.appendChild(inputs) //渲染节点(要不然不起作用,可以添加隐藏属性)
inputs.select() //选中节点
let actions = document.execCommand("Copy") //指定复制命令(返回的是一个boolean类型)
alert(actions)
}
}
}
</script>
vue2的复制粘贴功能
1.安装库并引入
安装: npm i vue-clipboard2
main.js中全局导入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
2.定义methods和template结构(两种实现的方法)
demo
<template>
<div class="hello">
<input type="text" v-model="text" />
<button @click="copy">点击复制</button>
</div>
</template>
script
data() {
return {
text: "",//定义的双向绑定的参数
};
},
methods: {
//定义的方法
copy() {
//参数是复制的内容
//.then()中的函数是复制成功和复制失败的两个回调函数
this.$copyText(this.text).then(
(e) => {
alert("复制text: " + this.text + " 成功!!");
console.log(e);
},
(err) => {
alert("复制失败");
console.log(err);
}
);
},
},
第二种使用的方法 指令
<template>
<div class="container">
{{qq}}
<button type="button"
v-clipboard:copy="qq" //复制的内容
v-clipboard:success="Copy" //复制成功调用的方法
v-clipboard:error="Error" //复制失败调用的方法
>复制QQ</button>
</div>
</template>
<script>
export default {
data() {
return {
qq:'123456 '
}
},
methods: {
Copy: function (e) {
alert('复制成功: ' + e.text)
},
Error: function (e) {
alert('复制失败')
}
}
}
</script>
二. Vue3(点击复制粘贴功能的实现)
1.安装库并导入
安装: npm i vue-clipboard3 --save
在需要文件中导入: import clipboard3 from “vue-clipboard3”;
demo
<template>
<div class="hello">
<input type="text" v-model="text">
<button @click="copy">点击复制</button>
</div>
</template>
script
//操作如下
const msg=ref("")
//解构出复制方法
const { toClipboard } = clipboard3();
const copy = async () => {
try {
await toClipboard(msg.value);
alert("复制的text: "+msg.value+' 复制成功!!')
} catch (error) {
alert("复制失败!!")
}
};
retrun:{msg,toClipboard ,copy }