Vue3—— 使用vue-clipboard3 实现按钮复制

最新推荐文章于 2026-03-28 02:50:10 发布

原创最新推荐文章于 2026-03-28 02:50:10 发布 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端 #npm

收录于

一、需求实现

二、安装

npm install --save vue-clipboard3

三、代码实现过程

vue-clipboard3 官网文档 vue-clipboard3 - npm

< template  lang =" html " >
  <p>{{ phoneNumber }}</p>
  <button @click="copy">copy</button>
</ template >


<script setup>
import useClipboard from "vue-clipboard3";
import { ref } from "vue";


let phoneNumber = ref("77777-88888-9999999");
const { toClipboard } = useClipboard();
const copy = async () => {
  try {
    await toClipboard(phoneNumber.value);
    console.log("Copied to clipboard");
  } catch (e) {
    console.error(e);
  }
};
</script>