vue中将文字复制到剪贴板

时间:2025-01-30 13:44:45
<template> <div> <button @click="copyText">复制文本</button> <p ref="textToCopy" @click="copyText">这是需要复制的文本</p> </div> </template> <script> export default { methods: { copyText() { //获取需要复制的文本内容。 const text = this.$refs.textToCopy.innerText; // 创建一个临时的 textarea 元素。 const el = document.createElement('textarea'); // 将需要复制的文本内容赋值给 textarea 元素。 el.value = text; //将 textarea 元素添加到页面中。 document.body.appendChild(el); //选中 textarea 元素中的文本。 el.select(); // 执行复制命令,将选中的文本复制到剪贴板 document.execCommand('copy'); //从页面中移除 textarea 元素。 document.body.removeChild(el); //弹出提示框,告知用户文本已复制成功。 alert('文本已复制'); }, }, }; </script>