使用Vue的插件clipboard使用复制功能

news2024/11/27 6:36:46

1.安装clipboard插件 

npm install clipboard

2.使用 clipboard 

<template>
    <div style="margin-right: auto;margin-left: auto; 800px">
      <el-table :data="list">
        <el-table-column label="搜索引擎" prop="name"></el-table-column>
        <el-table-column label="链接" prop="url"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="copyLink(scope.row)" class="tag">复制链接</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'ClipboardTest',
  data () {
    return {
      list: [
        {'name': '百度', 'url': 'https://www.baidu.com/'},
        {'name': '谷歌', 'url': 'https://www.google.com.hk/'},
        {'name': '360搜索', 'url': 'https://www.so.com/'}
      ]
    }
  },
  methods: {
    copyLink (data) {
      console.log(1)
      let clipboard = new Clipboard('.tag', {
        text: function () {
          return data.url
        }
      })
      clipboard.on('success', e => {
        this.$message({message: '复制成功', showClose: true, type: 'success'})
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message({message: '复制失败,', showClose: true, type: 'error'})
        clipboard.destroy()
      })
    }
  }
}
</script>

<style scoped>

</style>

 3.实现效果

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/764355.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python迭代器与生成器

文章目录 迭代器创建迭代器StopIteration 生成器 迭代器 访问集合元素的一种方式&#xff0c;可以记住遍历的位置的对象 从集合的第一个元素开始&#xff0c;直到所有的元素被访问完结束&#xff0c;迭代器只能往前不会后退 iter()&#xff0c;创建迭代器对象 iter(object, …

docker中配置mysql主从分离

目录 前言 1、下载mysql安装包 2、mysql 读写分离 3、docker安装三台mysql服务 4、修改主从配置文件 5、重启mysql 6、配置主库 7、配置从库创建同步账户 7.1、进入MySQL01和MySQL02和mysql03服务器新增MySQL用户user 密码root 用于同步账号和密码&#xff1b; 7.2、验…

说好的见框就插呢?

说好的见框就插呢&#xff1f; 背景一句话讲原理速挖XSS 背景 每一个学安全的&#xff0c;都听说过一句话&#xff0c;挖XSS就是见框就插&#xff0c;不得不说这个方法很有用&#xff0c;但是经常遇到插不进去的情况。今天浅聊一下XSS漏洞 一句话讲原理 XSS原理和注入很像&…

SpringCloud Alibaba——Ribbon的属性配置和类配置优先级

目录 一、Ribbon的属性配置和类配置哪个优先级高二、Ribbon的属性配置和类配置优先级源码解读 一、Ribbon的属性配置和类配置哪个优先级高 类配置优先级高 二、Ribbon的属性配置和类配置优先级源码解读 通过RibbonClientConfiguration类中的ribbonRule方法可知&#xff0c;优…

实现将redis中的所有数据备份到数据库表中

实现将redis中的所有数据备份到数据库表中 /*** 将redis中的数据同步到mysql中*/Overridepublic void saveMysqlForRedis(){Jedis jedis new Jedis("127.0.0.1", 6379);//System.out.println(jedis.ping());Set keys jedis.keys("*");//列出所有的keyI…

深度解读为什么说软件测试人人都能学

目录 1.软件测试的发展历程 2.软件测试行业优势 3.优就业软件测试学科优势 1.软件测试的发展历程 软件测试从上个世纪50年代发展至今&#xff0c;共经历了五个阶段&#xff1a;调试测试、证明测试、破坏性测试、评估测试、预防测试等&#xff0c;如下图&#xff1a; 现在已…

什么是NUMA,我们为什么要了解NUMA

在IA多核平台上进行开发时&#xff0c;我们经常会提到NUMA这个词 &#xff0c;那么NUMA到底指的是什么&#xff1f;我们怎么可以感受到它的存在&#xff1f;以及NUMA的存在对于我们编程会有什么影响&#xff1f;今天我们一起来看一下。 1、NUMA的由来 NUMA(Non-Uniform Memory…

MySQL(十):MySQL语法-进阶

MySQL语法-进阶 数据类型Text 类型Number 类型Date 类型 ASALTER TABLEconcat、group_concatSQL注入阻止SQL注入方案一方案二方案三 HAVING 子句临时表正则表达式获取服务器元数据事务导出数据导出数据导出表作为原始数导出SQL格式的数据 导入数据解决无法导入问题使用 LOAD DA…

kali linux 安装python 3xx 以及多版本切换的方式

简介 在渗透测试的时候&#xff0c;我们通常会用到不同的工具&#xff0c;这些工具可能对python的版本要求不一样&#xff0c;这个时候我们可能就需要在kali上面安装不同版本的python&#xff0c;以及灵活的切换python的版本。 下载python3并安装 以python38来举例&#xff…

Visual Studio 中的新特性:可视化宏扩展

今天&#xff0c;我们很高兴地宣布在 Visual Studio 17.7 预览版中推出可视化宏扩展功能。这个新功能通过可视化的方式对宏代码进行逐步扩展。 若要开始使用此功能&#xff0c;请确保你的 Visual Studio 版本更新到最新版本的 Visual Studio 预览版。 下面&#xff0c;我们来看…

图解Vit 3:Vision Transformer——ViT模型全流程拆解

文章目录 Layer NormalizationClassification TokenPosition embeedding 先把上一篇中的遗留问题解释清楚&#xff1a;上图中&#xff0c;代码中的all_head_dim就是有多少head。把他们拼接起来。 Encoder在Multi-Head Self-Attention之后&#xff0c;维度一直是BND&#xff0c;…

python flask 通过页面输入python代码,执行结果返回页面

1&#xff0c;不太好用 项目结构 app.py from flask import Flask, render_template, request import io import sysapp Flask(__name__)app.route(/) def index():return render_template(index.html)app.route(/execute, methods[POST]) def execute():code request.form[…

B071-项目实战-用户模块--手机注册 管理员登录

目录 完成注册功能后端开发完成UserControllerUserServiceImplLogininfoMapper 前端页面完成绑定数据绑定事件准备登录页 管理员登录1需求分析登录设计页面设计表设计流程设计所需技术 员工新增级联操作登录信息EmployeeServiceImplShopServiceImpl 管理员登录2前端页面后端接口…

Learning to cartoonize using white-box cartoon representations

论文笔记--漫画生成--White-box Cartoon Representations - 知乎论文 Learning to Cartoonize Using White-box Cartoon Representations 源码https://github.com/SystemErrorWang/White-box-Cartoonization效果算法概述这篇论文是将图像风格转成漫画风格&#xff0c;作者认为可…

MySQL索引index

目录 1.索引的概念 2.索引的优缺点 3.索引的数据结构 4.索引结构 1.二叉树&#xff1a; ​编辑2.红黑树&#xff1a; 3.BTree&#xff08;B-Tree&#xff09;&#xff1a; ​编辑4.传统BTree&#xff1a; ​编辑5.MySQL中的BTree&#xff1a; ​编辑6.Hash&#xf…

浅谈电子设备之电磁屏蔽箱设计要点

屏蔽箱又称隔离箱、屏蔽盒和电磁屏蔽箱&#xff0c;可以对传导和辐射进行处理&#xff0c;为无线通讯产品生产制造提供高效的隔离测试环境&#xff0c;测试内容包含耦合测试、RF功能测试、电磁干扰测试和电磁兼容性测试。屏蔽箱多采用铝合金材料设计&#xff0c;屏蔽材料阻隔能…

C语言模拟实现字符串处理函数

需要多一点点勇气&#xff0c;来面对变差的自己 大家好&#xff0c;我是纪宁。 这篇文章为大家带来的是5大字符串处理函数的模拟实现。 文章目录 1.strlen函数的模拟实现 2.strcpy函数的模拟实现 3.strcmp函数的模拟实现 4.strcat函数的模拟实现 5.strstr函数的模拟实现…

相机标定-基础(一)

1. 何为相机标定? 当相机拍摄照片时,我们看到的图像通常与我们实际看到的不完全相同。这是由相机镜头引起的,而且发生的频率比我们想象的要高。 这种图像的改变就是我们所说的畸变。一般来说,畸变是指直线在图像中出现弯曲或弯曲。 这种畸变我们可以通过相机标定来进行解…

反常积分题目

目录 题目1&#xff1a; 题目2&#xff1a; 题目3&#xff1a;​ 题目4&#xff1a; 题目5&#xff1a; 题目6&#xff1a; 题目7&#xff1a; 我们首先引入反常积分的定义&#xff1a; CSDNhttps://mp.csdn.net/mp_blog/creation/editor/131676865 题目1&#xff1a; 题目2…

STM32 ws2812b多屏驱动程序

文章目录 前言一、ws2812b的数据传输以及屏幕的组合二、代码ws2812screen.c文件ws2812screen.h文件主函数 前言 在上篇文章中使用了stm32的dmatim的方式点亮了ws2812b的灯 但是我的需求不仅仅是点亮他&#xff0c;我需要他像屏幕一样显示某一些东西&#xff0c;ws2812显示有一…