一、前言

适用场景：

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

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

二、实现方法

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

xml 复制代码

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

VUE、JS实现复制文本

一、前言

适用场景：

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

二、实现方法

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