Vue3 はワンクリックでコンテンツのコピー/カットを実装します

クリップボード.jsを使用する

ダウンロード

npm install clipboard --save

導入

import Clipboard from 'clipboard';

HTML

dom のdata-clipboard-text属性を使用して、コピーするコンテンツをバインドします

Cuttingを実現する必要がある場合は、 dom にdata-clipboard-action='cut'を追加するだけです。

<el-button type="primary" id="textArea" :data-clipboard-text="contentVal" @click="copyContent()">复制</el-button>

JS

Clipboard.on メソッドを使用して、成功または失敗のコールバックをリッスンします。

// 一键复制 文件内容
const copyContent = (id: number, link: string) => {
    
    
      const clipboard = new Clipboard(`#textArea`); // 获取dom
      clipboard.on('success', () => {
    
     // 成功回调
        ElMessage({
    
    
          type: 'success',
          message: '复制成功',
        });
        clipboard.destroy(); // 销毁多余的clipboard定义 否则会重复提示成功
      });
      clipboard.on('error', () => {
    
     // 失败回调
        ElMessageBox.confirm(
          `请手动复制:\n${
      
      link}`,
          {
    
    
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'info',
          },
        );
        clipboard.destroy();
      });
    };