JamieCurnow / vue-clipboard3

Easily copy to clipboard in Vue 3
MIT License
129 stars 13 forks source link

not work on quasar dialog #5

Closed adonisCuba closed 2 years ago

adonisCuba commented 2 years ago

im not sure but when i try, it not work on quasar dialog

YusufcanY commented 2 years ago

same in headless ui dialog

JamieCurnow commented 2 years ago

@adonisCuba @YusufcanY, is there any chance you could make a minimal repo for me to take a look at? I'm not familiar with quasar or headless ui

JamieCurnow commented 2 years ago

@YusufcanY here's a minimal example that is working for me with headless UI:

vue@3.2.36 @headlessui/vue@1.6.4 vue-clipboard3@2.0.0

<template>
  <div>
    <button @click="isOpen = !isOpen">Dialog</button>
    <Dialog :open="isOpen">
      <DialogPanel>
        <DialogTitle>Dialog title</DialogTitle>
        <DialogDescription> Dialog description </DialogDescription>

        <p>Dialog content</p>
        <button @click="toClipboard('the text')">Copy thing</button>
      </DialogPanel>
    </Dialog>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';
import {
  Dialog,
  DialogPanel,
  DialogTitle,
  DialogDescription,
} from '@headlessui/vue';

import useClipboard from 'vue-clipboard3';

export default defineComponent({
  components: {
    Dialog,
    DialogPanel,
    DialogTitle,
    DialogDescription,
  },
  setup() {
    const isOpen = ref(false);

    const { toClipboard } = useClipboard();

    return { isOpen, toClipboard };
  },
});
</script>
JamieCurnow commented 2 years ago

Closing due to lack of reproduction 😄