45 lines
1 KiB
Vue
45 lines
1 KiB
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.otp ?? "");
|
||
|
|
this.copySuccess = true;
|
||
|
|
this.timputCopy = setTimeout(() => {
|
||
|
|
this.copySuccess = false;
|
||
|
|
}, 2000);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|