Click 2 Copy | Membuat Click to Copy di Nuxt.js

🤣 hy sobat, sobat pernahkan berkunjung ke suatu website atau aplikasi mobile kemudian akan kita melakukan transaksi dan tampil nominal yang akan kita transfer. Tapi karena nominalnya Unik kita jadi susah untuk mengingat nya, alhasil kita harus mengCopy text/nominal tersebut agar nominal nya identik atau sesuai. tapi kadang sedikit kesulitas karena kita harus melakukan select pada text/nominal yang akan kita copy. Untuk memberi kemudahan jadi kita di beri solusi untuk melakukan copy text hanya dengan satu tombol khusus.

Oke bagaimana caranya, karena disini saya menggunakan Nuxt.js sobat bisa mengguankan script berikut ini .

export default {
  components: { multiselect },
  data() {
    return {
      rek     : '241421421',
    }
  },
  methods: {
    salinNomor(){
      let rek = this.rek;
      navigator.clipboard.writeText(rek)
    },
  }
}

untuk script codenya html nya seperti di bawah ini .

<div class="items-center justify-center flex">
            <input v-model="rek" readonly class="mx-auto text-center py-1 bg-gray-200 shadow-inner shadow-xl border-2 border-purple-400 rounded">
          </div>
          <div class="items-center flex mb-2">
            <button class="mx-auto px-2 py-1 mt-2 text-xs text-center bg-green-400 border-2 border-purple-600 rounded-lg" @click.prevent="salinNomor()">Saling Nomor</button>
          </div>

untuk tampilannya kurang lebih seperti di bawah ini.