快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

event：事件觸發(fā)時(shí)的所有參數(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);//添加一個(gè)copy事件
  document.execCommand("copy");//執(zhí)行copy方法
  this.$message({message: '復(fù)制成功', type:'success'})//提示
}

2. 單擊copy圖標(biāo)復(fù)制對(duì)應(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) // 添加一個(gè)copy事件
  document.execCommand('copy') // 執(zhí)行copy方法
  this.$message({ message: '復(fù)制成功', type: 'success' })
}

3.踩坑

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

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

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

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) // 添加一個(gè)copy事件,當(dāng)觸發(fā)時(shí)執(zhí)行一次,執(zhí)行完刪除
      document.execCommand('copy') // 執(zhí)行copy方法
      this.$message({ message: '復(fù)制成功', type: 'success' })
    }

4.eventlistener參考:

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

總結(jié)

到此這篇關(guān)于vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板的文章就介紹到這了,更多相關(guān)vue復(fù)制內(nèi)容到剪切板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: