前端vue:如何在vue中使用clipboard.js實現複製粘貼文字；

參考

clipboard 官網

安裝

能夠經過npm工具安裝

npm install clipboard --save
複製代碼

若是你不打算進行包管理，能夠直接下載 zip文件

• 選擇一個觸發複製事件的DOM對象；.icon-copy

  <el-button
         class="btn confirm copy icon-copy"
                ref="copy"
                data-clipboard-action="copy"
                data-clipboard-target="#inviteInfo"
                >複製連接</el-button>
  複製代碼

• 初始化實例對象：

  toInitClipboard() {
             this.copyBtn = new this.clipboard(".icon-copy");
        },
  複製代碼

• 事件:實例對象監聽copy事件，並做出對應的操做：

  clipboard.on("success", function() {
               _this.$message({
                 message: tips.copySuccessTip,
                 type: "success",
                 duration: "3000"
               });
               //當copy成功或者失敗的時候，銷燬當前監聽對象；
               clipboard.destroy();
             });
             clipboard.on("error", function() {
               _this.$message({
                 message: tips.copyFailedTip,
                 type: "error",
                 duration: "3000"
               });
               //當copy成功或者失敗的時候，銷燬當前監聽對象；
               clipboard.destroy();
             });
  複製代碼

單頁應用：能夠更加精確地管理 DOM 的生命週期。你能夠清理事件以及建立的對象。

瀏覽器支持

這個庫依賴 Selection 和 execCommand APIs. 前者兼容 全部的瀏覽器 後者只兼容如下瀏覽器版本。

好消息是，若是你須要支持舊瀏覽器，clipboard.js 能夠優雅降級。你所要作的就是在 success 事件觸發時提示用戶「已複製！」，error 事件觸發時提示用戶「按 Ctrl+C 複製文字」（此時用戶要複製的文字已經選擇了）。

你也能夠經過運行 Clipboard.isSupported() 來檢查瀏覽器是否支持 clipboard.js，若是不支持，你能夠隱藏複製/剪切按鈕。

實例源碼

<template>
   <div>
         <!-- 邀請 -->
        <div style="margin-left: 15px;cursor: pointer">
          <div class="inviteBtnContainer" @click="toOpenInviteDialog">
            <span class="inviteBtnInfo">邀請</span>
          </div>
        </div>
        <div>
              <el-dialog
                :visible.sync="inviteDialogVisible"
                width="530px"
                z-index="6000"
                @close="handleCreateInviteClose"
                :close-on-click-modal="false"
              >
                <div style="width:100%;">
                  <img style="width:inherit" src="../../assets/img/invite.png" alt>
                </div>
                <div id="inviteTitleInfo" style="margin-top:29px;">
                  <div style="text-align: center">
                    <span class="inviteTitle">邀請其餘企業</span>
                  </div>
                  <div style="text-align: center">
                    <span class="inviteTip">經過連接邀請的新的用戶接受邀約後，註冊經過後便可登陸企業平臺。</span>
                  </div>
                </div>
                <div id="inviteInfo" class="inviteInfo">
                  <div class="inviteContent">
                    <span>【{{tenantName}}】</span>
                    <span>企業管理員{{nickName}}</span>
                    <span>給你發來連接 ：</span>
                    <div style="margin: 3px 0;">
                      <a>{{encodeUrl}}</a>
                    </div>
                    <div>
                      <span>點擊進入xxx+平臺一塊兒協做工做吧！連接24小時內有效，爲確保企業信息安全，切勿隨意傳播該條信息，客戶服務熱線021-606xxxxx【xxx+】</span>
                    </div>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer footer-display center">
                  <el-button
                    class="btn confirm copy icon-copy"
                    ref="copy"
                    data-clipboard-action="copy"
                    data-clipboard-target="#inviteInfo"
                  >複製連接</el-button>
                  <el-button class="btn cancel" @click="inviteDialogVisible = false">取消</el-button>
                </span>
              </el-dialog>
        </div>
   </div>
   
</template>
exportdefault {
    data(){
        return {
            copyBtn:null,
        }
    },
    created() {
    this.init();
  
  },
   methods: {
    init() {
         this.toInitClipboard();
    },
    toInitClipboard() {
         this.copyBtn = new this.clipboard(".icon-copy");
    },
    handleCopyInvitationCode() {
          let _this = this;
          let clipboard = _this.copyBtn;
          clipboard.on("success", function() {
            _this.$message({
              message: tips.copySuccessTip,
              type: "success",
              duration: "3000"
            });
            //當copy成功或者失敗的時候，銷燬當前監聽對象；
            clipboard.destroy();
          });
          clipboard.on("error", function() {
            _this.$message({
              message: tips.copyFailedTip,
              type: "error",
              duration: "3000"
            });
            //當copy成功或者失敗的時候，銷燬當前監聽對象；
            clipboard.destroy();
          });
    },
    }
}
複製代碼