vue 实现点击复制文本到剪贴板

最新推荐文章于 2025-05-14 09:11:51 发布

嫣嫣细语

最新推荐文章于 2025-05-14 09:11:51 发布

阅读量4.1k

点赞数 8

分类专栏： javascript vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/136883673

版权

vue 实现点击复制文本到剪贴板共四种方法

1. navigator.clipboard.writeText该方法需要在安全域下才能够使用，比如：https 协议的地址、127.0.0.1、localhost

<template>
  <div>
    <el-button type="primary" @click="btn1">复制方法一</el-button>
    <div style="margin-top: 50px">{
  { message }}</div>  // 复制的内容
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "床前明月光",
    };
  },

  methods: {
    // 方法一
    btn1() {
      // navigator.clipboard.writeText 该方法需要在安全域下才能够使用，比如：https 协议的地址、127.0.0.1、localhost
      navigator.clipboard
        .writeText(this.message)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
&