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

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点击复制功能的更多相关文章

  1. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  2. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  3. js点击复制功能的实现

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. vue点击切换颜色限制个数(用了mui框架)

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  5. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  7. 源生JS实现点击复制功能

    之前在工作中,有位同事问过我一个问题,JS如何实现点击复制功能.给他解决后现在来总结归纳一下,顺便做个笔记. PS:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我. ...

  8. vue点击切换样式,点击切换地址栏,点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  9. vue 点击展开显示更多 点击收起部分隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Redis哨兵的配置和原理

    哨兵 在一个典型的一主多从的Redis系统中,当主数据库遇到异常中断服务后,需要手动选择一个从数据库升级为主数据库,整个过程需要人工介入,难以自动化. Redis2.8提供了哨兵2.0(2.6提供了1 ...

  2. 大白话带你认识JVM

    如果在文中用词或者理解方面出现问题,欢迎指出.此文旨在提及和而不深究,但会尽量效率地把知识点都抛出来 一.JVM的基本介绍 JVM 是 Java Virtual Machine 的缩写,它是一个虚构出 ...

  3. 01 . Varnish简介,原理,配置缓存

    简介 Varnish是高性能开源的反向代理服务器和HTTP缓存服务器,其功能与Squid服务器相似,都可以用来做HTTP缓存.可以安装 varnish 在任何web前端,同时配置它缓存内容.与传统的 ...

  4. 【模拟7.16】通讯(tarjan缩点加拓扑排序)

    这题确实水,纯板子,考试意外出错,只拿了暴力分QAQ tarjan缩点加上拓扑排序,注意这里求最短路径时不能用最小生成树 因为是单向边,不然就可能不是一个联通图了.... 1 #include< ...

  5. WPF中选择文件和选择文件夹的方法

    最近从winform转WPF,遇到了各种各样的问题.然而网上的关于WPF的资料少之又少,甚至连基本的文件选择操作,百度搜索的首页都没有一个比较好的方法.所以,踩了几个坑之后,我把我得到的方法分享给大家 ...

  6. Bootstrap中宽度大于指定宽度时有空白的解决方法

    <div class="container-fluid"></div> 其中container-fluid的作用是占100%

  7. Unix、Linux 软件包管理快速入门对照:apt、brew、pkg、yum

    请访问原文链接:https://sysin.org/blog/apt-brew-pkg-yum/,查看最新版.原创作品,转载请保留出处. 作者:gc(at)sysin.org,主页:www.sysin ...

  8. 【LeetCode每日一题 Day 2】2. 两数相加

    大家好,我是编程熊,今天是LeetCode每日一题的第二天,一起学习的是LeetCode第二题<两数相加>. 题意 给你两个 非空 的链表,表示两个非负的整数.它们每位数字都是按照 逆序 ...

  9. 12-2 MySQL数据库备份(分表)

    #!/bin/bash source /etc/profile DATE="$(date +%F_%H-%M-%S)" DB_IP="172.16.1.122" ...

  10. TCP 的 Keepalive 和 HTTP 的 Keep-Alive 是一个东西吗?

    大家好,我是小林. TCP 的 Keepalive 和 HTTP 的 Keep-Alive 是一个东西吗? 这是个好问题,应该有不少人都会搞混,因为这两个东西看上去太像了,很容易误以为是同一个东西. ...