クリップボード.js：

Clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽量の JavaScript プラグインです。このプラグインを通じて、入力ボックス、テキストフィールド、DIV 要素などのテキストコンテンツをクリップボードにコピーできます
。clipboard.js は、Chrome 42 以降、Firefox 41 以降、IE 9 以降、Opera 29 以降、Safari の主流ブラウザをサポートしています。 10+;

ダウンロード

npm install clipboard --save

使用

クリップボードからコンテンツをコピーする方法:

ターゲットからターゲットコンテンツをコピーする
関数を通じてコピーされるコンテンツ
属性を介してコピーされたコンテンツを返します

js ファイルをインポートします。

import Clipboard from 'clipboard';
new Clipboard('.btn')

シナリオ 1: クリックして入力ボックスの内容をコピー:
非常に一般的な使用例は、別の要素から内容をコピーすることです。この機能を実現するには、data-clipboard-target 属性をターゲット要素に追加します。
この属性の値は、別の要素と一致するセレクターです。

html：

在这里插入代码片
```<!-- Target -->
<input id="foo" value="复制文本">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

シナリオ 2: 別の要素からテキストを切り取る
data-clipboard-action 属性を定義して、コンテンツをコピーするか切り取るかを指定できます。デフォルトは copy です。

html：

<!-- Target -->
<textarea id="bar">点击下面按钮复制文本.</textarea>

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

注: 切り取り操作は、または要素にのみ有効です。

シナリオ 3: 属性からテキストをコピーする
別の要素からコンテンツをコピーする必要さえありません。data-clipboard-text 属性をターゲット要素に設定するだけです。
html：

<button class="btn" data-clipboard-text="这是复制文本">
    Copy to clipboard
</button>

シナリオ 4: コピー後にユーザーのフィードバックを表示するか、ユーザーがコピーまたは切り取った後に選択したテキストを取得したい
HTML(パグ形式)

el-button(v-if='shopCode' type='text' @click='copyShopCode' size='mini' class='copy') 复制门店code

import Clipboard from 'clipboard';
....

    // 复制门店code函数
    copyShopCode() {
    
    
      const clipboard = new Clipboard('.copy', {
    
    
        // 点击copy按钮，直接通过text直接返回复印的内容
        text: () => this.baseInfo.shopCode,
      });
        // 通过传递DOM选择器，HTML元素或HTML元素列表实例化
      clipboard.on('success', (e) => {
    
    
        this.$message.success(`复制成功，内容为：${
      
      e.text}`);
        e.clearSelection();
          // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', () => {
    
    
          // 不支持复制
        this.$message.error('该浏览器不支持自动复制');
          // 释放内存
        clipboard.destroy();
      });
    },

Vue クリックしてコンテンツをコピーする方法 - クリップボードの使用

クリップボード.js：

ダウンロード

使用

js ファイルをインポートします。

おすすめ