Sao chép văn bản bằng vue-clipboard2

---

Đôi khi, thật tiện lợi khi có một nút “sao chép” nhỏ xinh bên cạnh một mẩu thông tin trong ứng dụng web của bạn. Không có gì to tát, chỉ cần một nút nhỏ thôi phải không? Chà, hóa ra khó hơn một chút so với những gì người ta có thể mong đợi. Việc sao chép văn bản yêu cầu tạo hoặc truy cập một phần tử đầu vào, cài đặt lựa chọn và thực hiện lệnh sao chép. Để làm cho mọi thứ tồi tệ hơn, nó chỉ được hỗ trợ trong các trình duyệt gần đây. Cách phổ biến nhất để giải quyết vấn đề này là sử dụng Clipboard.js , một thư viện nhỏ thực hiện việc này cho bạn. Nhưng API của nó cho Vanilla JS vay nhiều hơn là Vue.js. Rất may, vue-clipboard2 tồn tại để bao bọc Clipboard.js và làm cho nó đẹp và dễ sử dụng.

Đây sẽ là một bài viết ngắn và hay vì vue-clipboard2 có một API cực kỳ đơn giản, vô nghĩa.

Cài đặt

Giả sử bạn đã cài đặt dự án Vue, hãy cài đặt vue-clipboard2 như với bất kỳ gói Yarn hoặc NPM nào khác.

# Yarn
$ yarn add vue-clipboard2
# NPM
$ npm install vue-clipboard2 --save

Bây giờ, như mọi khi, hãy bật plugin trong file ứng dụng chính của bạn.

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

Vue.use(VueClipboard);

new Vue({
  el: '#app',
  render: h => h(App)
});

Sử dụng

Bây giờ, chỉ cần thêm một lệnh v-clipboard: copy vào nút của bạn.

<template>
  <div>
    <p>Here, copy this thing: {{thingToCopy}}</p>
    <button v-clipboard:copy="thingToCopy"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
    }
  }
}
</script>

Tất nhiên, bạn muốn có thể hiển thị phản hồi cho user của bạn khi sao chép thành công hoặc không thành công (đặc biệt là vì các trình duyệt cũ hơn không hoạt động với phương pháp này, vì vậy bạn có thể nên hiển thị thông báo khi sao chép thành công hoặc không thành công. Điều này có thể được thực hiện với chỉ thị v-clipboard: thành công và v-clipboard: lỗi .

<template>
  <div>
    <p>Here, copy this thing: {{thingToCopy}}</p>
    <button
      v-clipboard:copy="thingToCopy"
      v-clipboard:success="handleCopyStatus(true)"
      v-clipboard:error="handleCopyStatus(false)"
    >
      Copy the thing!
    </button>
    <p v-if="copySucceeded === true">Copied!</p>
    <p v-if="copySucceeded === false">Press CTRL+C to copy.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      copySucceeded: null
      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
    }
  },

  methods: {
    handleCopyStatus(status) {
      this.copySucceeded = status
    }
  }
}
</script>

Và bạn có nó rồi đấy! Sao chép thực sự đơn giản cho các ứng dụng Vue.js của bạn khi bạn không cần phải tự thực hiện nó. Thưởng thức!

---

---

Các tin liên quan