vue实现点击复制
vue实现点击复制
·
vue实现点击复制
一、原生方法
- 选中复制
<template>
<div>
<el-button type="primary" plain @click="copy()">复制</el-button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
copy(){
document.execCommand("Copy"); // 执行浏览器复制命令
this.$message({
message: '复制成功',
type: 'success'
});
},
}
}
</script>
- 点击复制(我是在vue+element UI中实现点击表格中的按钮复制表格中的数据)
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleCopy(scope.$index, scope.row)">复制</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
tableData:{
name:'小明'
},
copyData:null,
}
},
methods:{
handleCopy(index,row){
this.copyData = row.name
this.copy(this.copyData)
},
copy(data){
let url = data;
let oInput = document.createElement('input');
oInput.value = url;
document.body.appendChild(oInput);
oInput.select(); // 选择对象;
console.log(oInput.value)
document.execCommand("Copy"); // 执行浏览器复制命令
this.$message({
message: '复制成功',
type: 'success'
});
oInput.remove()
},
}https://registry.npm.taobao.org
}
</script>
二、使用插件(vue-clipboard2)
- 安装vue-clipboard
npm install --save vue-clipboard2
( 出现错误的话,可以试试 npm config set registry https://registry.npm.taobao.org )
- main.js引入
import VueClipboards from 'vue-clipboard2'
Vue.use(VueClipboards);
- 案例
第一种方法:直接将变量内容复制至剪切板,暂时没有找到处理数据后再复制的方式
<template>
<div class="yeluosen">
<input type="text" v-model="message">
<el-button
icon="el-icon-share"
size="mini"
style="font-size: 16px;padding: 4px 8px;"
title="共享"
v-clipboard:copy="scope.row.url"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
@click="share(scope.row.url)"></el-button>
</div>
</template>
复制时,通过v-clipboard:copy
复制输入的内容:
// 复制成功 or 失败(提示信息!!!)
onCopy: function (e) {
console.log('复制成功!')
},
onError: function (e) {
console.log('复制失败!')
}
第二种方法:复制动作使用的是VUE响应函数方式,这就为复制前控制数据提供了可能!
// 点击事件
share(val) {
this.handleData(val)
this.$copyText(this.message).then(function (e) {
alert('Copied')
}, function (e) {
alert('Can not copy')
})
},
//数据处理
handleData(val){
this.message = this.message + ' ' + val
}
更多推荐
已为社区贡献2条内容
所有评论(0)