Để thực hiện thao tác sao chép nội dung vào clipboard trong ứng dụng Vue, một giải pháp phổ biến là sử dụng thư viện vue-clipboard2. Cài đặt rất đơn giản bằng lệnh npm:

npm install --save vue-clipboard2

Sau khi cài đặt xong, cần đăng ký plugin trong file main.js để sử dụng toàn cục:

import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard);

Cách 1: Sử dụng directive để sao chép trực tiếp

Phương pháp này dùng các directive có sẵn của thư viện để sao chép giá trị từ thuộc tính dữ liệu. Rất phù hợp khi cần sao chép nhanh một trường dữ liệu mà không cần xử lý thêm.

<el-button 
  type="primary" 
  size="small"
  v-clipboard:copy="scope.row.payLink"
  v-clipboard:success="handleCopySuccess"
  v-clipboard:error="handleCopyError">
  Sao chép
</el-button>

Xử lý kết quả thông qua hai phương thức tương ứng:

methods: {
  handleCopySuccess() {
    this.$message({
      message: 'Sao chép thành công',
      type: 'success'
    });
  },
  handleCopyError() {
    this.$message.error('Sao chép thất bại');
  }
}

Ưu điểm của cách này là ngắn gọn, dễ triển khai. Tuy nhiên, hạn chế là không thể can thiệp xử lý dữ liệu trước khi sao chép.

Cách 2: Dùng phương thức phản hồi (callback) để xử lý dữ liệu trước khi sao chép

Trường hợp cần thay đổi, định dạng hoặc thay thế giá trị động trước khi sao chép, ta nên dùng phương thức chủ động thông qua this.$copyText().

<el-table-column :label="$t('common_operation')" width="100">
  <template slot-scope="scope">
    <el-button
      size="small"
      type="primary"
      :disabled="!template.mobile || !template.appId"
      @click="triggerCopy(scope.row.content)">
      Sao chép
    </el-button>
  </template>
</el-table-column>

Trong phần xử lý, ta tiến hành biến đổi nội dung theo nhu cầu (ví dụ: thay thế các placeholder bằng giá trị thực), sau đó mới gọi hàm sao chép:

methods: {
  executeCopy(content) {
    this.$copyText(content).then(
      () => {
        this.$message.success('Sao chép thành công');
      },
      () => {
        this.$message.error('Thao tác sao chép thất bại');
      }
    );
  },

  triggerCopy(rawContent) {
    // Giả sử `res` là đối tượng chứa dữ liệu cần thay thế
    let processedContent = rawContent
      .replace(/\${applyAmount}/g, res.applyAmount || '')
      .replace(/\${dueDate}/g, res.dueDate || '')
      .replace(/\${firstName}/g, res.firstName || '')
      .replace(/\${link}/g, res.link || '')
      .replace(/\${paidAmount}/g, res.paidAmount || '')
      .replace(/\${penaltyAmount}/g, res.penaltyAmount || '')
      .replace(/\${penaltyAmountPerDay}/g, res.penaltyAmountPerDay || '')
      .replace(/\${penaltyDay}/g, res.penaltyDay || '')
      .replace(/\${repaymentAmount}/g, res.repaymentAmount || '')
      .replace(/\${username}/g, res.username || '');

    console.log('Nội dung sau xử lý:', processedContent);
    this.executeCopy(processedContent);
  }
}

Cách tiếp cận này linh hoạt hơn nhiều, cho phép bạn tùy chỉnh nội dung sao chép theo logic nghiệp vụ, như điền giá trị động, định dạng văn bản, hay kiểm tra điều kiện trước khi sao chép.