文本复制兼容方案最佳实现落地。

文章目录

一、navigator.clipboard.writeText
二、方案落地
总结

一、navigator.clipboard.writeText

navigator.clipboard.writeText 是一个Web API，它允许网页脚本将文本数据写入用户的系统剪贴板。这个API是异步的，并且设计用于提高安全性和用户体验，因为它要求网页必须是在用户交互（如点击或按键事件）的上下文中才能访问剪贴板。

样例代码如下：

// 假设你有一个按钮，用户点击它会触发文本复制
document.getElementById('copyButton').addEventListener('click', async function() {// 要复制的文本const textToCopy = '这是一段要复制到剪贴板的文本';try {// 使用 navigator.clipboard.writeText 复制文本await navigator.clipboard.writeText(textToCopy);console.log('文本已成功复制到剪贴板！');} catch (err) {console.error('无法复制文本：', err);}
});

二、方案落地

使用上面的方案会出现部署到生产环境和测试环境不生效，换成下面方法做兼容就可以了

<template><div class="box"><div class="gameId">{{ resStr }}</div><button id="copyButton" @click="copyText">复制内容</button></div><el-dialogv-model="dialogVisible"title="提示"width="500":before-close="handleClose"><span style="color: red">文本已复制</span><template #footer><div class="dialog-footer"><el-buttonstyle="width: 50px"type="primary"@click="dialogVisible = false">确定</el-button></div></template></el-dialog>
</template><script setup>
import { useRoute } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const resStr = ref("");
const str = Object.values(route.query).join("");
resStr.value = JSON.parse(str).join(",");const dialogVisible = ref(false);// 开发环境这个版本可以用，生产环境需要做兼容性判断
// 复制文本
// const copyText = () => {
//   try {
//     navigator.clipboard.writeText(resStr);
//     dialogVisible.value = true;
//   } catch (err) {
//     ElMessage.error("文本复制失败");
//   }
// };// 这个是用于兼容性判断  生成环境和测试环境都兼容
async function copyText() {if ("clipboard" in navigator) {try {await navigator.clipboard.writeText(resStr.value);dialogVisible.value = true;} catch (err) {}} else {// 回退方案：使用document.execCommand('copy')const textArea = document.createElement("textarea");textArea.value = resStr.value;document.body.appendChild(textArea);textArea.select();try {const successful = document.execCommand("copy");const msg = successful ? "successful" : "unsuccessful";} catch (err) {}document.body.removeChild(textArea);}
}
</script>