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

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. TensorFlow入门实操课程第一章练习笔记

    在本练习中,您将尝试构建一个神经网络,让它根据一个简单的公式来预测房屋的价格. 想象一下,如果房子的定价很简单,带一间卧室的房子价格是5万+5万,那么一间卧室的房子要花10万元:两间卧室的房子就要花1 ...

  2. C#winform的Richtextbox控件实现自动滚动到最后一行功能

    这里有两种情况 如果是采用的是richtextbox的AppendText的方法添加的内容,则只需 设置HideSelection为false 如果采用的是其他添加内容的方法,则需要添加TextCha ...

  3. 【redis前传】自己手写一个LRU策略 | redis淘汰策略

    title: 自己手写一个LRU策略 date: 2021-06-18 12:00:30 tags: - [redis] - [lru] categories: - [redis] permalink ...

  4. OO unit1 summary

    Unit 1 summary 一.前言 三周左右的学习,OO第一单元顺利结束了,个人认为有必要写个blog来反思总结一下自己第一单元的学习情况,以便更好地进行后面的学习. 之前从来没有写blog的习惯 ...

  5. 《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程)

    1.简介 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下. 2.eclipse中新建maven项目 1.依次点击eclipse的 ...

  6. Docker减小镜像体积

    导航: 这里分为几个部分. 相关转载云原生:米开朗基杨 1.Docker减小镜像体积 2.Docker镜像针对不同语言的精简策略 对于刚接触容器的人来说,他们很容易被自己制作的 Docker 镜像体积 ...

  7. 39、wget、curl

    39.1.wget介绍: wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败, wget会不断的尝试,直到整个文件 ...

  8. 关于asp.net中Repeater控件的一些应用

    在Asp.net中,我是比较喜欢用Repeater这个控件,刚刚遇到的一个问题,怎么实现单击 <asp:LinkButton>,通过后台的单击事件获取同一行数据中的其他数据(对象). 1, ...

  9. COURSES 赤裸裸的二分匹配大水题

    COURSES 1 #include <iostream> 2 #include <cstdio> 3 #include <cstring> 4 #include ...

  10. Java核心基础第1篇-走进Java世界

    一.Java简介 1.1 Java概述 Java从一开始就以友好的语法.面向对象.内存管理和最棒的跨平台可移植性来吸引程序员. 写一次就可以在所有地方执行( write-once/run-anywhe ...