vue中点击复制粘贴功能

来源:博客园 分类: 文章浏览史 发布时间:2020-09-10 21:15:20 最后更新:2020-09-10 浏览:23
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-10 21:15:20

1.下载clipboard.js

cnpm install clipboard --save 

2.引入,可以在mian.js中全局引入也可以在单个vue中引入

import Clipboard from 'clipboard';  

3.使用,在template中,这里我用了elementui框架

复制代码
<el-table-column
        label="taskId">
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div slot="content">点击复制</div>
             <span style="display:block;cursor:pointer;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" class="tag-read" :data-clipboard-text="tableData[scope.$index].taskId" @click="copy">{{tableData[scope.$index].taskId}}</span>  
          </el-tooltip>
            </template>
      </el-table-column>
复制代码

4.使用,在methods中

复制代码
copy() {  
          var clipboard = new Clipboard('.tag-read')  
          clipboard.on('success', e => {  
            success("复制成功");//这里你如果引入了elementui的提示就可以用,没有就注释即可
                  // 释放内存  
                  clipboard.destroy()  
                })  
                clipboard.on('error', e => {  
                  // 不支持复制  
                  console.log('该浏览器不支持自动复制')  
                  // 释放内存  
                  clipboard.destroy()  
                })  
        },
复制代码

 

5.最后效果:点击后直接可以在控制台进行粘贴

--------------------------》》》》》

 6.如果需要在main.js中引入

//引入剪切板插件clipboard;
import Clipboard from 'clipboard'; 
Vue.prototype.Clipboard=Clipboard;

vue组件中

复制代码
    copy() {  
          var clipboard = new this.Clipboard('.tag-read');  
          clipboard.on('success', e => {  
            success("复制成功");
                  // 释放内存  
                  clipboard.destroy()  
                })  
                clipboard.on('error', e => {  
                  // 不支持复制  
                  console.log('该浏览器不支持自动复制')  
                  // 释放内存  
                  clipboard.destroy()  
                })  
        },
复制代码

 

php技术微信