復(fù)制文本到剪切板的方法(個(gè)人筆記)

一何恶、navigator.clipboard.writeText()方法

注：該方法需要在安全域下才能夠使用细层，比如：https 協(xié)議的地址、127.0.0.1盛撑、localhost

<template>
  <div>
    <el-button type="primary" @click="handleCopy">復(fù)制</el-button>
    <div>{{ message }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "復(fù)制的內(nèi)容",
    };
  },

  methods: {
    handleCopy() {
      navigator.clipboard
        .writeText(this.message)
        .then(() => {
          this.$message.success("復(fù)制成功");
        })
        .catch((err) => {
          // 復(fù)制失敗
          console.error("復(fù)制失敗");
        });
    },
  },
};
</script>

二捧搞、clipboard.js的使用

原文鏈接：https://segmentfault.com/a/1190000020651289?utm_source=tag-newest

安裝

從npm 安裝

npm install clipboard --save

或者，如果您不喜歡包管理介粘，只需下載一個(gè)ZIP文件

設(shè)置

script 引入

 <script src="dist/clipboard.min.js"></script>

三方 CDN引入

現(xiàn)在需要通過傳遞一個(gè)DOM選擇器创坞、一個(gè)HTML標(biāo)簽或者一組HTML標(biāo)簽來實(shí)例化它

new ClipboardJS('.btn');  //通過類名.btn的元素實(shí)例化

在內(nèi)部，我們需要獲取與選擇器匹配的所有元素偎谁，并為每個(gè)元素附加事件監(jiān)聽器纲堵。但你猜怎么著?如果有數(shù)百個(gè)匹配項(xiàng)，則此操作會(huì)消耗大量內(nèi)存铐望。
因此茂附，我們使用事件委托，它將多個(gè)事件偵聽器替換為一個(gè)偵聽器营曼。

報(bào)錯(cuò)

如出現(xiàn)innerHtml的報(bào)錯(cuò)蒂阱，就把實(shí)例化寫到定時(shí)器里面狂塘。

setTimeout(()=>{
    new Clipboard(document.getElementById('copyBtn'));
},1000)

使用方法

我們正在經(jīng)歷一個(gè)聲明性的復(fù)興鳄厌，這就是為什么我們決定利用HTML5的數(shù)據(jù)屬性來獲得更好的可用性

復(fù)制

相當(dāng)普遍的使用場景是從其他元素復(fù)制文本。在觸發(fā)元素上添加 data-clipboard-target 屬性泪漂，該屬性值用來匹配另一個(gè)元素選擇器新思。

<!-- Target -->
<!-- <input
  id="bar"
  value="無敵大帥哥"
> -->
<p id="bar">無敵大帥哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 復(fù)制 </button>

剪切

另外，也可以定義 data-clipboard-action 屬性為 copy/cut 來纵刘，明確操作是 復(fù)制 / 剪切
如果忽略了這個(gè)屬性荸哟，便默認(rèn) 復(fù)制

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如上例，剪切 cut 的操作只能在 <input> 和 <textarea> 標(biāo)簽中起作用舵抹，在其他標(biāo)簽中會(huì)出現(xiàn)事件正常調(diào)用劣砍，但是操作是失敗的，粘貼板是沒有改變的刑枝。

通過屬性復(fù)制文本

我們甚至不必需要其他承載文本的元素装畅，僅通過在觸發(fā)元素中添加 data-clipboard-text 屬性來完成復(fù)制

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

注意：

data-clipboard-text “級別最高”，在 data-clipboard-target 等屬性存在時(shí)掠兄，復(fù)制內(nèi)容及相關(guān)參數(shù)以 data-clipboard-text 為準(zhǔn)

事件

回調(diào)函數(shù)： success / error

事件名	參數(shù)
success	event.action `copy/cut` 操作
	event.text `copy/cut` 操作文本內(nèi)容
	event.triger 觸發(fā)操作的`DOM`元素
error	event.action `copy/cut` 操作
	event.triger 觸發(fā)操作的`DOM`元素

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

工具提示

每個(gè)應(yīng)用程序有不同的設(shè)計(jì)需求蚂夕，這就是為什么clipboard.js不包括任何CSS或內(nèi)置的工具提示解決方案。
您在這個(gè)演示站點(diǎn)上看到的工具提示是使用GitHub的Primer構(gòu)建的侈贷。如果你正在尋找相似的外觀和感覺牍汹，你可能想看看。

高級用法

如果你不想修改你的HTML嫁蛇，有一個(gè)非常方便的命令式API供你使用露该。您所需要做的就是聲明一個(gè)函數(shù)，執(zhí)行您的操作解幼，然后返回一個(gè)值。

例如如果想動(dòng)態(tài)的設(shè)置一個(gè)目標(biāo)元素target底靠，則需要返回一個(gè)節(jié)點(diǎn),即動(dòng)態(tài)設(shè)置點(diǎn)擊復(fù)制的目標(biāo)元素

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});

如果想動(dòng)態(tài)設(shè)置內(nèi)容文本text特铝，則返回一個(gè)字符串String

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label') || 'default text ';
    }
});

在Bootstrap Modals 中或與任何其他更改焦點(diǎn)的庫一起使用時(shí)鲫剿，將希望將焦點(diǎn)元素設(shè)置為 container 值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

并且灵莲，如果在單頁應(yīng)用中使用時(shí)，要更精確地管理DOM的生命周期枚抵，可以使用以下方法清除創(chuàng)建的事件對象

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

動(dòng)態(tài)生成多個(gè)實(shí)例

<el-table-column align="center" prop="push_flow" label="推流地址">
     <template scope="{row}">
          <span>{{row.push_flow}}</span>
          <el-button 
              type="text"
              size="small" 
              class="" 
              :id="'streamurl'+row.live_id" 
              :data-clipboard-text="row.push_flow" 
              @click="handleFlowCopy(row.live_id)">
              復(fù)制
           </el-button>
      </template>
</el-table-column>

handleFlowCopy(id) {
    // 根據(jù)當(dāng)前id動(dòng)態(tài)生成不同實(shí)例
    var streamurl = new Clipboard(document.getElementById('streamurl' + id));
    streamurl.on('success', (e) => {
        this.$message.success('復(fù)制成功')
        streamurl.destroy()
    });
},

以上方法當(dāng)點(diǎn)擊按鈕時(shí)才實(shí)例化俄精，所以第一次點(diǎn)擊復(fù)制不成功榕堰，第二次后面才成功。處理方法：當(dāng)請求table數(shù)據(jù)成功后就實(shí)例化一次逆屡。

handleGetTableData() {
     getData().then(res => {
          res.data.map(i => {
               new Clipboard(document.getElementById('streamurl' + i.live_id));
          })
     })
}

瀏覽器支持

這個(gè)庫同時(shí)依賴于Selection和execCommand api魏蔗。所有瀏覽器都支持第一個(gè)，而以下瀏覽器支持第二個(gè)莺治。

Chrome 42 +
Edge12 +
Firefox 41 +
IE 9 +
Opera 29 +
Safari 10 +

好消息是，如果需要支持舊的瀏覽器床佳，clipboard.js可以優(yōu)雅地降級。你所要做的就是顯示一個(gè)工具提示“復(fù)制!”在調(diào)用成功事件時(shí)杆麸，因?yàn)槲谋疽呀?jīng)被選中浪感，所以在調(diào)用錯(cuò)誤事件時(shí)，請按Ctrl+C進(jìn)行復(fù)制影兽。
你也可以通過運(yùn)行ClipboardJS.isSupported()來檢查是否支持clipboard.js赢笨，這樣你就可以從UI中隱藏復(fù)制/剪切按鈕。