Vue3 复制 copy 功能实现(vue-clipboard3)-程序员宅基地

技术标签: Vue3.x  前端  vue.js  javascript  

  • 安装 vue-clipboard3,附:vue2 复制 copy 功能实现

    $ npm install --save vue-clipboard3
    
  • setup () {} 中使用:

    <template>
      <button @click="touchCopy">复制链接</button>
    </template>
    
    <script>
    import {
             defineComponent } from 'vue'
    // 导入插件
    import useClipboard from 'vue-clipboard3'
    
    export default defineComponent({
            
      setup () {
            
        // 点击复制
        function touchCopy () {
            
          // 调用
          copy('拷贝内容')
        }
        // 使用插件
        const {
             toClipboard } = useClipboard()
        const copy = async (msg) => {
            
          try {
            
            // 复制
            await toClipboard(msg)
            // 复制成功
          } catch (e) {
            
            // 复制失败
          }
        }
        // 导出
        return {
            
          // 点击复制
          touchCopy
        }
      }
    })
    </script>
    
  • <script setup> 中使用:

    <template>
      <button @click="touchCopy">复制链接</button>
    </template>
    
    <script setup>
    // 导入插件
    import useClipboard from 'vue-clipboard3'
    
    // 点击复制
    function touchCopy () {
            
      // 调用
      copy('拷贝内容')
    }
    // 使用插件
    const {
             toClipboard } = useClipboard()
    const copy = async (msg) => {
            
      try {
            
        // 复制
        await toClipboard(msg)
        // 复制成功
      } catch (e) {
            
        // 复制失败
      }
    }
    </script>
    
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zz00008888/article/details/127732385

智能推荐

C++ 学习笔记(对双端队列进行封装,实现数据生产者消费者)-程序员宅基地

文章浏览阅读698次。#pragma once #include <deque>#include <condition_variable>template <typename T>class MsgList { public: void add(const T& msg) { std::unique_lock<std::mutex> lock(mutex); queue.

python水表识别图像识别深度学习 CNN_水表 深度学习 识别-程序员宅基地

文章浏览阅读551次,点赞8次,收藏8次。重点:项目和文档是本人近期原创所作!程序可以将水表图片里面的数据进行深度学习,提取相关信息训练,lw1.3万字重复15%,可以直接上交那种!具体和看下面的目录。python水表识别,图像识别深度学习 CNN,Opencv,Keras。_水表 深度学习 识别

【DataSet】遥感图像方面的人工智能数据集_群智感知 图像数据集-程序员宅基地

文章浏览阅读288次。遥感图像方面的人工智能数据集数据集类别常用数据集目标检测数据集DSTL 卫星图像数据集;RSOD-Dataset 数据集;NWPUVHR-10地理遥感数据集图像分割数据集Inria AerialImage Labeling Dataset 遥感图像数据集遥感图像分类数据集UCMerced Land-Use Data Set 土地遥感数据集_群智感知 图像数据集

python使用镜像安装opencv_opencv_python安装镜像-程序员宅基地

文章浏览阅读2.9k次,点赞3次,收藏11次。如何在pycharm中安装opencv_opencv_python安装镜像

手把手教你IDEA创建SSM项目结构_idea创建ssm web项目-程序员宅基地

文章浏览阅读595次,点赞2次,收藏8次。我的小站SSM项目需要用来管理依赖,所以我们需要先配置好,配置很容易,我就不演示了。首先,我们新建项目,勾选,选择模板,然后创建。这里耐心等待下载完成。可以看到,这里没用相关的文件夹。我们直接在文件夹上右键新建文件夹,下面会显示一个,直接创建就可以。此时,我们按照规范来,创建一个包。项目结构多种多样,比如三层架构啥的,按照你的需求来。我这里就稍微演示一下。这里这些结构都是可以自己按照规范命名,结构也有很多,分层架构方法也有很多,这里权当借鉴一下。我这里整合了一份依赖,如需使用可按照自己需求和对于版本进_idea创建ssm web项目

2022年-2023年中职网络安全web渗透任务整理合集_server2280 中职组-程序员宅基地

文章浏览阅读3.2k次。2022年-2023年中职网络安全web渗透任务整理合集_server2280 中职组

随便推点

canal异常 Could not find first log file name in binary log index file_canal could not find first log file name in binary-程序员宅基地

文章浏览阅读4.4k次,点赞3次,收藏2次。Could not find first log file name in binary log index file问题解决解决过程问题最近在使用canal来监测数据库的变化,处理变动的数据。由于有一段时间没有用了,这次启动在日志文件中看到这个异常 Could not find first log file name in binary log index file,详细信息如下:2020-12-16 19:14:42.053 [destination = tradeAndRefund , addr_canal could not find first log file name in binary log index file

【练习】生成10个1到20之间的不重复的随机数并降序输出-程序员宅基地

文章浏览阅读960次。分析:1.创建一个Random对象;2.创建一个hashset的集合对象;3.循环生成10个1-20的随机数4.输出。package edu.xalead;import java.util.*;public class Test { public static void main(String[] args) { Random r...

linux系统扩展名大全,Linux系统文件扩展名学习-程序员宅基地

文章浏览阅读3.2k次。Linux系统下的扩展名并不能标识该文件是属于哪一种类型的文件。文件是否可以执行等都跟文件的扩展名无关。因为文件script没有执行权限,所以也就无法执行,sh-3.2# touch ./scriptsh-3.2# ls -lh ./script-rw-r--r-- 1 root root 0 Dec 28 06:15 ./scriptsh-3.2#sh-3.2# ./scriptsh: /scr..._linux的扩展名

WPF TabControl 滚动选项卡_wpf 使用tabcontrol如何给切换的页面增加滚动条-程序员宅基地

文章浏览阅读1.3k次,点赞27次,收藏19次。我原本以为是很简单的事情,但是没想到实际做起来还是有很多的基础知识点的。我们平常写TabControl的时候,可能都很习惯了直接写TabControl+TabItem。但是TabControl负责了什么布局,TabItem负责了什么布局,我们都不知道。在《深入浅出WPF》中,我们可以看到TabControl属于ItemsControl我们去看看控件模板样式副本。WPF的xaml的优点是每个控件都是单独的逻辑,耦合低。缺点是写起来麻烦,每次改动约等于重新写一个新的。通过增加自己的工作量来降低了耦合我们可以看_wpf 使用tabcontrol如何给切换的页面增加滚动条

Apache Jmeter常用插件下载及安装及软硬件性能指标_jmeter插件下载-程序员宅基地

文章浏览阅读2.1k次,点赞24次,收藏47次。Apache Jmeter常用插件下载及安装_jmeter插件下载

SpringBoot 2.X整合Mybatis_springboot2.1.5整合mybatis不需要配置mapper-locations-程序员宅基地

文章浏览阅读5.9k次,点赞6次,收藏18次。实际上Mybatis的整合过程像极了我们程序员的一生。在SpringBoot 整合Mybatis之前,我们回忆回忆以前 MyBatis 单独使用时,myBatis 核心配置文件要配置数据源、事务、连接数据库账号、密码....是的全是这货一个人干,都要亲力亲为。这就是我们的低谷期myBatis 与 spring 整合的时候,配置数据源、事务、连接数据库的账号什么的都交由 spring 管理就行,就不用什么都自己管理自己去干。这就是我们春风得意的时候,事业有着落...再后来,Spring_springboot2.1.5整合mybatis不需要配置mapper-locations

推荐文章

热门文章

相关标签