ff-admin/src/components/TextCopy.vue

<template>
  <div class="flex relative">
    <input type="text" :value="copyText" />
    <ClipboardIcon
      class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
      @click="copyToClipboard"
    />
    <div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
      <SuccessCheckmark />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import { ClipboardIcon } from "@heroicons/vue/24/outline";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    copyText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      timeoutCopy: undefined as any,
      copySuccess: false,
    };
  },
  methods: {
    copyToClipboard() {
      navigator.clipboard.writeText(this.copyText ?? "");
      this.copySuccess = true;
      this.timeoutCopy = setTimeout(() => {
        this.copySuccess = false;
      }, 2000);
    },
  },
});
</script>