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

安装 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>

本文链接：https://blog.csdn.net/zz00008888/article/details/127732385

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

[基础] Dart - 条件表达式_dart 条件表达式-程序员宅基地

文章浏览阅读343次。Dart - 条件表达式关于Dart 语言的基础学习记录Dart 官方网站if…else 条件表达式if(条件A){ //条件A成立执行的内容}else if(条件B){ //条件B成立执行的内容}else{ //条件A-B 都不成立执行的内容}switch…case 条件表达式int a = 1;switch(a) //需要判断的内容{ case 1:..._dart 条件表达式

CentOS7 完全卸载 php-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏3次。在 CentOS 7 使用 yum install 简单安装 php 后，发现 php 版本 5.4 ，太低了！然后，使用 yum remove 简单卸载后，发现 php 还在，不干净！只好 rpm 慢慢卸载

ASP.Net中使用Log4Net-程序员宅基地

文章浏览阅读254次。1、在Web.Config配置Code<configSections><sectionname="log4net"type="log4net.Config.Log4NetConfigurationSectionHandler,log4net"/></configSections><log4net><!--De..._asp.net中使用log4net

js实现图片压缩【无需导包】-程序员宅基地

文章浏览阅读800次。将图片压缩后，我们会得到一个 Base64 编码的字符串，该字符串包括了压缩后的图片数据以及一些元信息，如图片格式、压缩质量等。可以通过第二个参数来设置图片的压缩质量，该参数的取值范围是0到1，其中0表示最低质量（最高压缩），1表示最高质量（最低压缩，默认值为0.92）。就是如果后续需要把压缩后的图片比如说进行上传操作，我们得得到处理后图片的Base64 编码就好办了，其实这个 Base64 编码就在眼前。这里我再提供一个vue测试代码，可以在控制台中打印出图片压缩前后的size，以及图片压缩后的回显。

第十三届蓝桥杯省赛C++ C组《全题目+题解》_蓝桥杯c组省赛-程序员宅基地

文章浏览阅读5.4k次，点赞75次，收藏141次。本篇来自第十三届蓝桥杯省赛C++ C组《全题目+题解》_蓝桥杯c组省赛

MATLAB车道线检测技术分析_车道路线识别matlab-程序员宅基地

文章浏览阅读942次，点赞22次，收藏21次。车道线检测的应用场景具有时序信息特性，为了利用时序特征通常会引入RNN模块，加上Encoder-Decoder的形式已经成为CNN特征提取的标配，所以一般的做法是对Encoder提取的Features进行进一步加工，提取连续帧带来的历史信息。VPGNet：一共20k张图片，包含白天（非雨天、雨天、大雨天）、夜晚的数据，同时包含了各种车道线类型，以及其他不同类型的车道标识（左转箭头、直行箭头、斑马线等等），如下图。TuSimple：一共72k张图片，位于高速路，天气晴朗，车道线清晰，特点是车道线以点来标注；_车道路线识别matlab

随便推点

墨器杯垫文创商品设计特优_杯垫文创设计说明-程序员宅基地

文章浏览阅读737次。教育部昨举行「102年国立馆所文创商品设计比赛」颁奖典礼，台北科技大学创新设计研究所硕士生谢镇宇，为TW艺术教育馆设计「墨器」杯垫，取「默契」谐音，用5片压克力板，展现水墨画层层渲染效果，增加立体视觉感受，并在杯架后方加入LED光源，获评审肯定夺特优奖和奖金10万元。台南应用科技大学商品设计系学生高郁翔，为国立自然科学博物馆设计「恐龙化石钉书机」，他认为小朋友把钉书机钉下去的那一刻，会觉得像暴龙準_杯垫文创设计说明

C#中关于XML与对象，集合的相互转换-程序员宅基地

文章浏览阅读404次。XML与对象，集合的相互转化　　今天小伙伴在群里问了一下关于XML与对象之间的相互转换，作为菜鸟的我正好趁着闲着的时间学习了一波，直接上代码了，有疑问或者有错误的地方还请大家指正，谢谢。。。。 1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System...._c# xml转集合

笔记：图以及cpp基础-程序员宅基地

文章浏览阅读1.8k次。如int fun(int i,char a)和void fun(char a,int i)就可以构成函数重载，根据函数名修饰的原理我们可以得到_funic和 _funci两个经过修饰之后得到的函数名，在进行修饰后的函数名显然是不同的。定义：同一个作用域内，相同函数名，参数不同（类型不同，个数不同）可以构成函数重载（和返回值无关）分析其二：顶点i的度即为第i行和i列的“1”的个数，如果是无向图就只要考虑每一行“1”的个数。图的邻接矩阵为一个二维数组，设为A.arcs【i】【j】（理解为两个顶点之间的关系）_cpp