vue3 + vue-clipboard3 复制文本到剪切板

1.安装

yarn add vue-clipboard3

2.引入

import useClipboard from 'vue-clipboard3';

3.html部分

<n-button tertiary type="primary" ref="copyBtn" @click="copyPath()">
                复制地址
              </n-button>

4.js部分

<script setup lang="ts">

//一键复制
const { toClipboard } = useClipboard();

const copyPreviewPath = async (text?: string) => {
  try {
    await toClipboard('这里传入要复制的文本内容');
    window["$message"].success(text || "复制成功！");
  } catch (e) {
    console.error(e);
    window["$message"].error("复制失败！您的浏览器不支持复制功能！");
  }
};
</script>

5.遇到的坑

当按钮在模态框中时，复制功能会失效（百度说：模态框修改了焦点，额，不太懂）；

处理办法：将第4步的标红部分改为，即传入按钮的dom对象：

let copyBtn = ref<any>(null);//定义按钮的dom对象

const copyPreviewPath = async (text?: string) => {
  try {
    await toClipboard('这里传入要复制的文本内容',copyBtn.value.$el); 
　　 window["$message"].success(text || "复制成功！"); 
  } catch (e) { 
　　console.error(e); 
　　window["$message"].error("复制失败！您的浏览器不支持复制功能！"); 
　　} 
};