码迷,mamicode.com
首页 > 其他好文 > 详细

vue点击复制功能

时间:2019-10-08 18:43:05      阅读:705      评论:0      收藏:0      [点我收藏+]

标签:NPU   成功   exp   row   element   有助于   hand   prim   and   

复制功能,选中复制或者点击复制(不使用插件的情况下)

1、选中复制

这个比点击复制简单点


<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>
代码如图:
技术图片
选中点击按钮即可复制,其实这个并不实用,有助于理解execCommand("Copy")。
 
2、点击复制
  (我是在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()
      },
  }
}
</script>            
如图:技术图片技术图片
其实就是把值赋给一个创建的节点选中
 
 
 

vue点击复制功能

标签:NPU   成功   exp   row   element   有助于   hand   prim   and   

原文地址:https://www.cnblogs.com/zyz-s/p/11636885.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!