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

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.实现效果

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

cesium实战(1)、cesium 加载本地json、GeoJson数据

1、cesium加载本地图层json图层数据 并设置样式 添加图层 // 加载路网数据 wms数据服务let addRoadLayer () > {Cesium.GeoJsonDataSource.load(/cesium/layers/road_84.json, {stroke: Cesium.Color.YELLOW,//多边形或线的颜色 strokeWidth: 3,//多边形或线 宽度clampToG…

【优选算法题练习】day6

文章目录 一、76. 最小覆盖子串1.题目简介2.解题思路3.代码4.运行结果 二、704. 二分查找1.题目简介2.解题思路3.代码4.运行结果 三、34. 在排序数组中查找元素的第一个和最后一个位置1.题目简介2.解题思路3.代码4.运行结果 总结 一、76. 最小覆盖子串 1.题目简介 76. 最小覆…

Selenium(3 + 4 超级详细笔记)

文章目录 selenium&#xff08;web自动化测试&#xff09;1. selenium初始化&#xff08;2种&#xff09;2. chrome 启动参数&#xff08;3种&#xff09;3. 八大定位方式3.1 css 定位3.2 xpath 定位3.3 link_text 定位3.4 partial_link_text 定位3.5 relative 相对定位 4. 添加…

OpenCv之图像轮廓

目录 一、图像轮廓定义 二、绘制轮廓 三、计算轮廓面积与周长 一、图像轮廓定义 图像轮廓是具有相同颜色或灰度的连续带你的曲线.轮廓在形状分析和物体的检测和识别中很有用 轮廓的作用: 用于图形分析物体的识别与检测 注意点: 为了检测的准确性&#xff0c;需要先对图像…

采集传感器的物联网网关怎么采集数据?

随着工业4.0和智能制造的快速发展&#xff0c;物联网&#xff08;IoT&#xff09;技术的应用越来越广泛&#xff0c;传感器在整个物联网系统中使用非常普遍&#xff0c;如温度传感器、湿度传感器、光照传感器等&#xff0c;对于大部分物联网应用来说&#xff0c;采集传感器都非…

JVM系统优化实践(20):GC生产环境案例(三)

您好&#xff0c;这里是「码农镖局」CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; 某新手开发工程师接到了一个保存Elasticsearch日志的任务&#xff0c;以供后续分析之用。但写代码的时候&#xff0c;误将保存日志的代码段弄成了无限循环&#xff0c;程序…

C#盯盘小工具,“监”

也是一个小工具&#xff0c;用来看大A股票和主要指数行情的。 如果你是一个上班族&#xff0c;同时你也是一颗小韭菜&#xff0c;a股在开市交易盘中时刻惦记着股票是涨了还是跌了&#xff0c;却不能时刻盯着手机看行情&#xff0c;也不能在电脑上开着同花顺来回切窗口&#xff…

数据可视化自助式分析工具:jvs-bi数据扩展及函数配置说明

jvs-bi数据拓展节点 数据拓展是数据可视化加工过程中的重要工具&#xff0c;它核心的作用是对原有数据表进行加工扩展&#xff0c;实现功能如下图所示 函数配置操作过程 操作说明 1、拖动数据拓展字段&#xff0c;并将字段拓展与之前的历史节点连接起来&#xff0c;点击数据拓…

全面深入理解MySQL自增锁

&#x1f497;推荐阅读文章&#x1f497; &#x1f338;JavaSE系列&#x1f338;&#x1f449;1️⃣《JavaSE系列教程》&#x1f33a;MySQL系列&#x1f33a;&#x1f449;2️⃣《MySQL系列教程》&#x1f340;JavaWeb系列&#x1f340;&#x1f449;3️⃣《JavaWeb系列教程》…

在 3ds Max 中对链模型进行摆放姿势处理

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 建模和“摆姿势”3D链可能看起来是一项繁琐的工作&#xff0c;但实际上可以通过使用阵列工具并将链中的链接视为骨骼来轻松完成。在本教程中&#xff0c;我将向您展示如何对链条进行建模&#xff0c;并通过…

16. 存储过程和存储函数

文章目录 1.存储过程和存储函数2.创建和使用存储过程2.1 语法&#xff1a;2.2 第一个存储过程&#xff0c;打印hello world2.3 调用语法2.4 带参数的存储过程2.5 调试存储过程 3.创建和使用存储函数3.1 存储函数定义3.2 存储函数语法&#xff1a;3.3 存储函数案例&#xff1a; …

C++初探

目录 经典开头 — C的历史 作用域运算符 using的用法 命名空间 - namespace 命名空间的基本使用 特殊的命名空间 - 无名命名空间 全部展开和部分展开 std — C所有的标准库都在std命名空间内 省缺值 - 默认参数 占位参数 内联函数 - inline 函数重载 函数重载的用…

如何撤销git上一次的commit(或已push)

如何撤销git上一次的commit&#xff08;或已push&#xff09; 当多人开发时&#xff0c;我们本地commit后&#xff0c;刚要push&#xff0c;发现忘记pull最新代码&#xff0c;此时会有冲突push失败&#xff0c; 我们想要撤销最近的一次commit 我们先简单介绍一下git git有三大…

Python爬虫——urllib_ajax的get请求爬取豆瓣电影前十页

ajax&#xff1a; 就是一段js代码&#xff0c;通过这段代码&#xff0c;可以让页面发送异步的请求&#xff0c;或者向服务器发送一个东西&#xff0c;即和服务器进行交互 对于ajax&#xff1a; 一定会有 url&#xff0c;请求方法(get, post)&#xff0c;可能有数据一般使用 j…

DBeaver数据库管理工具安装连接PostgreSQL和DM

文章目录 1. 安装2. 连接PostgreSQL3. 连接DM83.1 下载驱动3.2 添加驱动3.3 连接3.4 创建表空间和用户3.5 执行sql 4. 连接Mysql 1. 安装 下载地址 https://dbeaver.io/download/ 2. 连接PostgreSQL 配置显示所有数据库 第二个勾选会显示模板数据库 点击测试连接&#xff0…

linux之Ubuntu系列(三)远程管理指令☞Scp

cp scp cp 复制文件 是限制在本地操作 scp&#xff1a; 远程拷贝文件 cp [options] 源文件or 目录 目标文件or 目录 如果复制目录&#xff0c;要加 -r 选项 &#xff0c;同时如果目标目录不存在&#xff0c;会会创建 scp scp就是 secure copy&#xff0c;是一个在linux下用来…

在 Linux 系统上下载 Android SDK

使用ubuntu系统进行车机开发&#xff0c;今天开始配置环境&#xff0c;首先是下载android studio&#xff0c;然后下载android sdk&#xff0c;这里需要注意的是linux系统不能使用windows系统下的Android sdk&#xff0c;亲测会出现各种问题。 常规思路&#xff0c;下载sdk&am…

视频问答新增或修改视频问答

通过问答id新增或修改视频问答题目 新增或修改视频问答 图3&#xff1a;视频问答功能&#xff08;观看效果&#xff09; 图4&#xff1a;视频问答功能&#xff08;观看效果&#xff09; 图5&#xff1a;视频问答功能&#xff08;观看效果&#xff09; 单元测试 Testpublic voi…

基于单片机的智能窗帘智能晾衣架系统的设计与实现

功能介绍 以STM32单片机单片机作为主控系统&#xff1b;OLED液晶显示当前环境温湿度&#xff0c;光照强度&#xff0c;时间&#xff0c;开关状态等信息&#xff1b;雨滴传感器检测当前环境是否下雨&#xff0c;天气下雨检测&#xff0c;天气潮湿时自动收衣服&#xff1b;可以通…

Spring(一):Spring 的创建和使用

目录 Spring 是什么&#xff1f; 什么是容器&#xff1f; 什么是 IoC&#xff1f; 什么是 IoC&#xff1f; IoC的优点是啥呢&#xff1f; 理解 IoC DI 概念说明 Spring 的创建 创建 Spring 项目 1. 创建⼀个普通 Maven 项⽬。 2. 添加 Spring 框架⽀持&#xff08;s…