vue项目中实现复制粘贴功能的两种办法
vue项目中实现复制粘贴功能
·
第一种办法:
1、引入插件
npm install --save vue-clipboard2
2、在mian.js中引入
import VueClipboard from 'vue-clipboard2' //引入插件
Vue.use(VueClipboard) //安装插件
3、在组件间中使用
<template>
<div>
<span
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>
复制
</span>
</div>
</template>
<script>
export default {
data() {
return {
message: "",
};
},
mounted() {
this.onload();
},
methods: {
onload() {
//这里的message是字符串不能是数字
this.message = "hhhhhhhh";
},
onCopy: function (e) {
console.log(e);
console.log("复制成功!");
},
onError: function (e) {
console.log(e);
console.log("复制失败!");
},
},
};
</script>
第二种办法
复制表格里某一行中某一条数据
<template>
<el-table :data="tableData" height="250" border style="width: 100%">
<el-table-column prop="id" label="id" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-document-copy"
v-clipboard:copy="scope.row.name"
v-clipboard:success="onCopy"
>复制</el-button
>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"> </el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 10000,
name: "张三",
age: 18,
},
{
id: 10001,
name: "李四",
age: 18,
},
{
id: 10002,
name: "王五 ",
age: 18,
},
],
};
},
methods: {
onCopy() {
this.$message.success("复制成功");
},
},
};
</script>
更多推荐
所有评论(0)