Vue Use Utilities

# useClipboard

useClipboard

Reactive navigator.clipboard API

# Example

Copy some input message

# Usage

<input
  type="text"
  placeholder="Input some text"
  v-model="source"
/>
<button @click="copy">Copy</button>
<button @click="clear">Clear</button>
1
2
3
4
5
6
7
import { ref, defineComponent } from 'vue'
import { useClipboard } from '@vueblocks/vue-use-core'

export default defineComponent({
  setup () {
    const source = ref('')
    const { copy, copied, text, clear } = useClipboard({ source })

    return {
      source,
      text,
      copy,
      copied,
      clear
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Typing

interface ClipboardOption {
    source?: string;
    during?: number;
}
interface ClipboardResult {
    text: Ref<string>;
    copy: typeof NOOP;
    clear: typeof NOOP;
    copied: Ref<boolean>;
    isSupported: Ref<boolean>;
}
/**
 * A Reactive Clipboard API
 * @param options
 * @returns
 */
declare const useClipboard: (options?: ClipboardOption) => ClipboardResult;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

← useColor →