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("复制失败!您的浏览器不支持复制功能!");
  }
};

 

posted @ 2023-01-17 16:39  小白&小菜  阅读(4285)  评论(0编辑  收藏  举报
我是一个小菜鸟,飞呀飞呀,快飞高