✨ useClipboard

useClipboard() fonksiyonu web sitenizde veya uygulamanızda panoya kopyalama işlevini yapmanıza için kullanılır.

🏪 Kullanım

useClipboard fonksiyonunun kullanım şekli aşağıdaki gibidir.

import { useClipboard } from 'vue-composable-utils';
const { copy } = useClipboard();

🚀 Özellikler

useClipboard fonksiyonu copy özelliğine sahiptir. copy Özelliği iki adet parametre alır.

Parametreler	Açıklama
value	Kopyalanacak değer.
ref	Kopyalamak istediğimiz verinin kapsayıcı class'ına erişmek için kullanılır.

💻 Uygulama

Aşağıdaki örneği kullanarak nasıl değiştiğini görebilirsiniz.

Kopyalanmak istenilen veri...

<template>
  <div class="clipboard" ref="clipboardRef">
    <div>
      <p>{{ copyText }}</p>
      <button class="btn" @click="onCopy">Copy</button>
    </div>
    <div>
      <input type="text" v-model="clipboardModel" />
      <button class="btn" @click="onCopyInput">Copy</button>
      <p>{{ clipboardModel }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api';
import { useClipboard } from 'vue-composable-utils';

export default {
  name: 'ClipboardComponent',
  setup() {
    const clipboardRef = ref(null);
    const clipboardModel = ref(null);
    const copyText = ref('Kopyalanmak istenilen veri...');

    const { copy } = useClipboard();

    const onCopy = () => {
      copy(copyText.value, clipboardRef.value);
    };

    const onCopyInput = () => {
      copy(clipboardModel.value, clipboardRef.value);
    };

    return {
      copy,
      onCopy,
      copyText,
      onCopyInput,
      clipboardRef,
      clipboardModel,
    };
  },
};
</script>