一、前言
适用场景:
- 复制文本
- 复制链接
- 复制段落
- 复制账号、手机号
- ···
友情提示:浏览器自带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>