Skip to content
On this page

KClipboardProvider

<KClipboardProvider /> Provide clipboard functionality to components.

html
<template>
  <KInput :model-value="dataToCopy" @input="newValue => dataToCopy = newValue" type="text" class="mb-2 w-100" />
  <KClipboardProvider v-slot="{ copyToClipboard }">
    <KButton @click="() => { if (copyToClipboard(dataToCopy)) alert(`Copied '${dataToCopy}'`) }">
      copy to clipboard
    </KButton>
  </KClipboardProvider>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const dataToCopy = ref('copy this to the clipboard')

    const alert = (msg: string): void => {
      window.alert(msg)
    }

    return { dataToCopy, alert }
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Slots

  • default - content to toggle.

Slot Props

PropsTypeDescription
copyToClipboardFunctioncopy to clipboard @returns {Boolean}

Released under the Apache-2.0 License.