快捷導(dǎo)航

vue實現(xiàn)點擊復(fù)制文本到剪貼板方式

更新時間：2025年10月15日 08:58:08 作者：你的眼睛會笑

文章介紹了四種在Vue中實現(xiàn)復(fù)制文本到剪貼板的方法：1.使用navigator.clipboard.writeText（需要在安全域下使用）；2.使用即將廢棄的execCommand方法；3.通過引入vue-clipboard2庫；4.使用clipboard.js庫,推薦使用第一種或第三種方法

vue點擊復(fù)制文本到剪貼板共四種方法

1. navigator.clipboard.writeText

該方法需要在安全域下才能夠使用，比如：https 協(xié)議的地址、127.0.0.1、localhost

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

  methods: {
    // 方法一
    btn1() {
      // navigator.clipboard.writeText 該方法需要在安全域下才能夠使用，比如：https 協(xié)議的地址、127.0.0.1、localhost
      navigator.clipboard
        .writeText(this.message)
        .then(() => {
          this.$message.success("復(fù)制成功");
        })
        .catch((err) => {
          // 復(fù)制失敗
          console.error("復(fù)制失敗");
        });
    },
  },
};
</script>

2. execCommand方法

即將被廢棄

<template>
  <div>
    <el-button type="primary" @click="btn2">復(fù)制方法二</el-button>
    <div style="margin-top: 50px">{{ message1 }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message1: "疑是地上霜",
    };
  },
  methods: {
    // 方法二  execCommand方法即將被廢棄
    btn2() {
      let input = document.createElement("input");
      document.body.appendChild(input);
      input.value = this.message1; // 此處為需要復(fù)制的文本變量
      input.focus();
      input.select();
      try {
        let result = document.execCommand("copy");
        document.body.removeChild(input);
        if (!result) {
          console.error("復(fù)制失敗");
        } else {
          this.$message.success("復(fù)制成功");
        }
      } catch (e) {
        document.body.removeChild(input);
        alert("當(dāng)前瀏覽器不支持復(fù)制功能，請檢查更新或更換其他瀏覽器操作");
      }
    },
  },
};
</script>

3. 使用vue-clipboard2庫

安裝 npm install --save vue-clipboard2

main.js 中引入

<template>
  <div>
    <el-button
      type="primary"
      v-clipboard:copy="message2"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
      >復(fù)制方法三</el-button
    >
    <div style="margin-top: 50px">{{ message2 }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message2: "舉頭望明月",
    };
  },
  methods: {
    // 方法三
    // 使用vue-clipboard2庫
    // 安裝 npm install --save vue-clipboard2
    // 在main.js中引入
    // import VueClipboard from 'vue-clipboard2';
    // Vue.use(VueClipboard);
    onError() {
      console.error("復(fù)制失敗");
    },
    // 復(fù)制
    onCopy() {
      this.$message.success("復(fù)制成功");
    },
  },
};
</script>

4. 使用clipboard.js庫

npm install clipboard --save

當(dāng)前文件引入 import ClipboardJS from "clipboard";

<template>
  <div>
    <el-button type="primary" class="btn">復(fù)制方法四</el-button>
    <div style="margin-top: 50px">{{ message3 }}</div>
  </div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
  data() {
    return {
      message3: "低頭思故鄉(xiāng)",
    };
  },
  mounted() {
    // 方法四
    // cnpm install clipboard --save
    // 當(dāng)前文件引入 import ClipboardJS from "clipboard";
    let that = this;
    const clipboard = new ClipboardJS(".btn", {
      text: function () {
        return that.message3;
      },
    });
    clipboard.on("success", function (e) {
      console.log("復(fù)制成功");
    });
    clipboard.on("error", function (e) {
      console.log("復(fù)制失敗");
    });
  }
};
</script>

推薦使用第一種或者第三種，請根據(jù)自身需求選擇適當(dāng)?shù)姆椒ǎ?/p>