Vue3 Admin Template là một template quản trị được xây dựng trên nền tảng Vue3 kết hợp với ElementPlus, TypeScript và Vite. Template này cung cấp nhiều thành phần chức năng hữu ích cho các ứng dụng quản lý, trong đó tính năng sao chép văn bản và tạo mã QR là hai công cụ quan trọng giúp nâng cao trải nghiệm người dùng. Bài viết này sẽ hướng dẫn chi tiết cách triển khai và ứng dụng hai tính năng này trong các dự án thực tế.

Chức năng sao chép văn bản: Giải pháp linh hoạt cho nhiều tình huống

Trong các hệ thống quản lý, tính năng sao chép văn bản được sử dụng rộng rãi - từ việc sao chép đơn giản một dòng văn bản đến việc kết hợp và sao chép nhiều trường dữ liệu khác nhau. Vue3 Admin Template cung cấp giải pháp toàn diện thông qua các công cụ clipboard được đóng gói sẵn và các directive tùy chỉnh.

Cấu trúc triển khai chính

Tính năng sao chép văn bản được triển khai trong file src/views/CopyText/index.vue, bao gồm hai trường hợp sử dụng chính: sao chép nội dung văn bản dài và sao chép dữ liệu kết hợp từ nhiều trường. Bên cạnh đó, dự án còn cung cấp các file hỗ trợ như src/utils/clipboard.ts và src/directive/clipboard/clipboard.ts để xử lý các thao tác với clipboard.

Sao chép nội dung văn bản dài

Tình huống này phù hợp khi cần sao nhanh các đoạn văn bản lớn như mã nguồn, thông tin mô tả chi tiết. Trong component, một ô nhập liệu và nút sao chép được thiết kế như sau:

<el-input 
  id="inputContent" 
  v-model="textValue" 
  type="textarea" 
  :rows="3" 
  placeholder="Nhập nội dung cần sao chép">
</el-input>
<el-button 
  size="medium" 
  type="success" 
  plain 
  @click="executeCopy(textValue, $event)">
  Sao chép
</el-button>

Khi người dùng nhấn nút sao chép, phương thức executeCopy sẽ được gọi để thực hiện thao tác:

const executeCopy = (contentValue: string, event: MouseEvent) => {
  const params = {
    successTip: 'Đã sao chép thành công',
    failedTip: 'Sao chép thất bại'
  }
  clipboardUtil(contentValue, event, params)
}

Phương thức này sử dụng công cụ clipboard từ file tiện ích và hiển thị kết quả thông qua thành phần thông báo của ElementPlus.

Sao chép dữ liệu kết hợp từ nhiều trường

Tình huống thứ hai phù hợp khi cần sao chép dữ liệu dạng bảng với định dạng cụ thể, chẳng hạn như thông tin khách hàng hoặc địa chỉ giao hàng. Component bảng trong src/views/CopyText/index.vue cung cấp nút sao chép cho mỗi dòng dữ liệu:

<el-button 
  v-clipboard="`Họ tên:${dataItem.name},Địa chỉ:${dataItem.address}`" 
  size="medium" 
  type="info" 
  plain>
  <el-icon><copy-document /></el-icon>
  Sao chép
</el-button>

Directive v-clipboard được định nghĩa trong file src/directive/clipboard/clipboard.ts, cho phép sao chép trực tiếp chuỗi được bind vào clipboard một cách nhanh chóng.

Chức năng tạo mã QR: Công cụ chia sẻ và quảng bá hiệu quả

Tính năng tạo mã QR là công cụ quảng bá không thể thiếu trong các hệ thống quản lý, thường được dùng để tạo mã QR cho các chiến dịch marketing, liên kết sản phẩm, hoặc trang landing page. Vue3 Admin Template cung cấp giải pháp hoàn chỉnh để tạo và tải xuống mã QR một cách dễ dàng.

Cấu trúc thành phần và thư viện phụ thuộc

Tính năng mã QR được triển khai trong component src/views/qrcode/qrcodeGen.vue, sử dụng thư viện qrcode.vue để tạo mã QR và dom-to-image để chuyển đổi mã QR thành hình ảnh. File tiện ích src/utils/transferToBlob.ts cung cấp hàm chuyển đổi URL hình ảnh thành đối tượng Blob phục vụ cho việc tải xuống.

Quy trình tạo mã QR và cấu hình

Trong component, người dùng có thể nhập liên kết tùy chỉnh thông qua form cấu hình:

<qrcode-vue :value="formData.url"></qrcode-vue>
<el-form ref="formRef" :model="formData" :rules="validationRules" label-width="100px">
  <el-form-item label="Đường dẫn" prop="url">
    <el-input v-model="formData.url"></el-input>
  </el-form-item>
  <el-button @click="createQRImage">Tải mã QR</el-button>
</el-form>

Sau khi người dùng nhập liên kết và nhấn nút "Tải mã QR", phương thức createQRImage sẽ được kích hoạt để tạo và tải xuống hình ảnh.

Xử lý lưu trữ và tải xuống hình ảnh

Phương thức createQRImage sử dụng thư viện dom-to-image để chuyển đổi phần tử DOM chứa mã QR thành đối tượng Blob:

const createQRImage = () => {
  const config = { cacheBust: true, width: 375, bgcolor: '#ffffff' }
  domtoimage
    .toBlob(qrElementRef.value, config)
    .then((imageBlob: Blob) => {
      const reader = new FileReader()
      reader.onload = (event) => {
        qrImageData.value = event?.target?.result
        downloadImage()
      }
      if (imageBlob) {
        reader.readAsDataURL(imageBlob)
      }
    })
}

Tiếp theo, phương thức downloadImage xử lý việc tạo liên kết tải xuống và lưu hình ảnh:

const downloadImage = () => {
  convertUrlToBlob(qrImageData.value, (blobResult: Blob) => {
    const downloadLink = document.createElement('a')
    const objectUrl = window.URL.createObjectURL(blobResult)
    downloadLink.href = objectUrl
    downloadLink.download = 'qrcode.png'
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
  })
  ElMessage.success('Đã lưu thành công!')
}

Các tình huống ứng dụng thực tế

Ứng dụng tính năng sao chép văn bản:

• Chia sẻ nhanh thông tin: Sao chép dữ liệu quan trọng như thông tin khách hàng, chi tiết đơn hàng để chia sẻ hoặc lưu trữ tạm thời.
• Sao chép mã nguồn: Trong các trang tài liệu hoặc cấu hình hệ thống, cho phép người dùng sao chép mã nguồn mẫu vào trình soạn thảo cục bộ.
• Kết hợp dữ liệu đa trường: Chọn nhiều dòng dữ liệu từ bảng và sao chép theo định dạng tùy chỉnh, phục vụ cho việc tạo báo cáo hoặc nhập liệu.

Ứng dụng tính năng tạo mã QR:

• Chiến dịch marketing: Tạo mã QR chứa đường dẫn trang web khuyến mãi cho các ấn phẩm in ấn hoặc chia sẻ trực tuyến.
• Giới thiệu sản phẩm: Tạo mã QR dẫn đến trang chi tiết sản phẩm, giúp khách hàng dễ dàng truy cập bằng điện thoại.
• Xuất dữ liệu: Chuyển đổi liên kết báo cáo, thống kê thành mã QR để xem trên thiết bị di động.

Ưu điểm của bộ tính năng

• Dễ sử dụng: Chỉ cần một cú nhấp chuột đơn giản để hoàn thành thao tác sao chép hoặc tạo mã QR.
• Tùy biến cao: Hỗ trợ định dạng nội dung sao chép tùy ý và liên kết mã QR theo nhu cầu kinh doanh cụ thể.
• Phản hồi người dùng tốt: Kết quả thao tác được hiển thị ngay lập tức thông qua thành phần thông báo của ElementPlus.
• Tái sử dụng cao: Các class tiện ích và directive được đóng gói có thể được tái sử dụng trong các component khác, giảm thiểu công việc phát triển lặp đi lặp lại.

Hướng dẫn tích hợp vào dự án

Để sử dụng các tính năng này trong dự án của bạn, trước tiên hãy tải mã nguồn Vue3 Admin Template từ kho lưu trữ:

git clone https://github.com/your-repo/vue3-admin-template

Sau đó, tích hợp các component vào trang phù hợp:

• Tính năng sao chép văn bản: Sử dụng trực tiếp component tại src/views/CopyText/index.vue hoặc nhúng directive từ src/directive/clipboard/clipboard.ts.
• Tính năng mã QR: Tích hợp component src/views/qrcode/qrcodeGen.vue hoặc cài đặt riêng các thư viện qrcode-vue và dom-to-image để triển khai tương tự.

Khi triển khai, hãy điều chỉnh định dạng nội dung sao chép và kiểu dáng mã QR sao cho phù hợp với yêu cầu nghiệp vụ và mang lại trải nghiệm tốt nhất cho người dùng.