# [Vue.js] Clipboard 點擊複製字串

###### tags: `Vue.js`

[Clipboard 參考資料](https://www.cnblogs.com/xiao-ling-zi/p/11725176.html)

npm install clipboard --save 

* main.js中全局/單頁引入

import Clipboard from 'clipboard'; 
Vue.prototype.Clipboard=Clipboard;

import Clipboard from "clipboard";//單頁面引用

* 使用data-clipboard-text中就是要複製的内容

<a  href="#"
    class="btn btn-coupon btn-primary btn-block"
    @click.prevent="cobycode"
    data-clipboard-text="HAPPY2YEARS"
    >複製優惠代碼
</a>

* 綁定dom元素btn-coupon，成功複製後可使用Alertmessage元件彈出提醒

  methods: {
    cobycode() {
      var _this = this;
      var clipboard = new Clipboard(".btn-coupon"); //单页面引用
      clipboard.on("success", e => {
        // 释放内存
        clipboard.destroy();
        _this.$bus.$emit(
          "message:push",
          "優惠代碼已成功複製 (^∇^) ",
          "success"
        );
      });

      clipboard.on("error", e => {
        // 不支持复制
        clipboard.destroy();
        _this.$bus.$emit("message:push", "複製失敗", "warning");
      });
    }
  },