Vue3实现复制到剪切板功能

晚时之秋

已于 2025-01-07 08:44:48 修改

阅读量462

点赞数 2

文章标签： vue 前端

于 2025-01-06 10:31:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_66557048/article/details/144956814

版权

1.实现复制粘贴功能

<template>
   <el-button type="success" icon="CopyDocument" @click="copyLink()">专属链接</el-button>
</template>
// 1、下载vue-clipboard3
// 2、yarn add vue-clipboard3/npm install vue-clipboard3
import clipboard3 from 'vue-clipboard3'
const { toClipboard } = clipboard3()
// 复制专属连接
const copyLink = async() => {
  let url = 'http://b.nmgca.com/index/index/wxlogin.html?business_id=1&tourl=http://192.168.8.12:8080/phone?serviceId=&rid=123';
    await toClipboard(url) 
  ElMessage({
    type: "success",
    message: "复制链接成功!!!",
  });
};