vue实现点击复制的方法

329 阅读1分钟

背景

在表格里面的点击某一行的按钮或者其他元素,可以在浏览器复制上改表格或者改行需要的数据进行复制,也可以根据具体的需求在复制相应的数据

效果图

image.png

代码

//vue
<el-table
    <el-table-column label="secret-key" align="center" prop="secretKey">
        <template slot-scope="scope">
            <el-button v-if="scope.row.secretKey"  //简化点击按钮复制scope.row.secretKey的值
              type="text"
              size="small"
              icon="el-icon-copy-document"
              @click="copy(scope.row.secretKey)"></el-button>
            <el-tag>{{ scope.row.secretKey}}</el-tag>
        </template>
    </el-table-column>
 </el-table>
 
 //js
 export default {
   methods: {
         copy(data){
            let url = data;
            let oInput = document.createElement('input');
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令  如果页面是选择好了直接只用执行这一行代码就可以在浏览器里复制上
            this.$modal.msgSuccess("复制成功");
            oInput.remove()
        },
    }
  }