這篇文章主要介紹Vue怎么實現(xiàn)剪貼板復制功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)主要從事網(wǎng)站設計制作、網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務正定,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

一. 安裝插件

第一種直接npm安裝： npm install clipboard --save

   第二種：  <script src="js/clipboard.min.js"></script>（下載地址：https://clipboardjs.com/）

二. 全局注入（main.js）

import VueClipboard from 'vue-clipboard2'

  Vue.use(VueClipboard)

三. 封裝方法方便多次使用

新建一個index.js文件里面存放項目會多次使用的方法

export default{
  install(Vue,opstion){
    //把方法寫在vue原型方便調(diào)用
   Vue.prototype.copy = function (value) {
    this.$copyText(
     `${value}`
    ).then( res => {
     //這是element的Message 消息提示組件
      this.$message({
       message: "復制成功",
       type: "success"
      });
     },
     err => {
      this.$message.error("復制失敗");
     }
    );
   },
  }
}

四. 在需要復制的頁面中調(diào)用copy方法

<template>
     <el-tooltip class="item" effect="dark" content="復制" placement="bottom">
       <i class="icon copy iconfont" @click.stop="copyCode()"></i>
     </el-tooltip>
    </template>
    
    <script>
    
    //直接調(diào)用copy方法就可以了
      copyCode(scope) {
      //把需要復制的內(nèi)容傳value
         this.copy(scope.row.date);
       },
    </script>

以上是“Vue怎么實現(xiàn)剪貼板復制功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：Vue怎么實現(xiàn)剪貼板復制功能-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.rwnh.cn/article22/pdpcc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站建設、網(wǎng)站改版、做網(wǎng)站、營銷型網(wǎng)站建設、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)