VUE、JS实现复制文本

一、前言

适用场景：

• 复制文本
• 复制链接
• 复制段落
• 复制账号、手机号
• ···

友情提示：浏览器自带document.execCommand()方法（已弃用）

二、实现方法

• 剪贴板 clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力；
• 本次仅演示复制文本，其他Api可自行探索。

<template>
  <div class="box">
    <button style="margin: 20px" class="copy" @click="copy(data.text)">复制</button>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const store = useStore();
const data = reactive({
  text:'这是一段内容'
});
// 复制
const copy = (txt) => {
  // 将文本内容复制到剪贴板
  navigator.clipboard.writeText(txt).then(() => {
      alert("复制文本成功");
    })
    .catch(() => {
      alert("复制文本失败");
    });
};
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>