快捷導(dǎo)航

vue中如何實現(xiàn)復(fù)制內(nèi)容到剪切板詳解

更新時間：2022年10月13日 12:02:18 作者：愛學(xué)習(xí)的獅王

有些業(yè)務(wù)需求需要點擊按鈕復(fù)制鏈接,下面這篇文章主要給大家介紹了關(guān)于vue中如何實現(xiàn)復(fù)制內(nèi)容到剪切板的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. element-ui的el-table實現(xiàn)雙擊復(fù)制單元格的內(nèi)容到剪切板

1. 在el-table中添加雙擊響應(yīng)事件

<el-table
      :data="tableData"
      @cell-dblclick="copyText"
      border
    >
    .....
<el-table>

cell-dblclick函數(shù)有四個參數(shù)，分別是row, column, cell, event；

row：可看到被其操作單元格所在行的所有的數(shù)據(jù)；

cloumn：可以看到被其操作單元格的property，根據(jù)property可以再row中得到該單元格的值；

cell：可看到該單元格的dom結(jié)構(gòu)；

event：事件觸發(fā)時的所有參數(shù)；

2. 在methods中添加雙擊綁定的copyText方法

copyText(row, column, cell, event){
  // 雙擊復(fù)制
  let save = function (e){
    e.clipboardData.setData('text/plain',event.target.innerText); 
    e.preventDefault();  //阻止默認(rèn)行為
  }
  document.addEventListener('copy',save);//添加一個copy事件
  document.execCommand("copy");//執(zhí)行copy方法
  this.$message({message: '復(fù)制成功', type:'success'})//提示
}

2. 單擊copy圖標(biāo)復(fù)制對應(yīng)的內(nèi)容到剪切板

1. 添加copy的小圖標(biāo)

<span v-else>
  <i class="el-icon-document-copy" @click="clickCopy(msg)" />
  {{ msg }}
</span>

2. 在methods中添加單擊復(fù)制的clickCopy方法

clickCopy(msg) {
  const save = function(e) {
    e.clipboardData.setData('text/plain', msg)
    e.preventDefault() // 阻止默認(rèn)行為
  }
  document.addEventListener('copy', save) // 添加一個copy事件
  document.execCommand('copy') // 執(zhí)行copy方法
  this.$message({ message: '復(fù)制成功', type: 'success' })
}

3.踩坑

1. 添加了copy事件之后整個頁面按ctrl+c復(fù)制東西沒反應(yīng)了

猜測是使用document.addEventListener(‘copy’, save)會在整個dom樹添加事件,會覆蓋dom樹原有的事件的發(fā)生,所以需要添加once參數(shù)使這個事件只生效一次

once 表示 listener 在添加之后最多只調(diào)用一次。如果是 true， listener 會在其被調(diào)用之后自動移除

clickCopy(msg) {
      const save = function(e) {
        e.clipboardData.setData('text/plain', msg)
        e.preventDefault() // 阻止默認(rèn)行為
      }
      const once = {
        once: true
      }
      document.addEventListener('copy', save, once) // 添加一個copy事件,當(dāng)觸發(fā)時執(zhí)行一次,執(zhí)行完刪除
      document.execCommand('copy') // 執(zhí)行copy方法
      this.$message({ message: '復(fù)制成功', type: 'success' })
    }