65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="cursor-pointer"
|
||
|
|
:class="{ 'text-white': light, 'animate-pulse': isSensitive }"
|
||
|
|
:title="`2 mal klicken für ${action}`"
|
||
|
|
@click.prevent="handleClick"
|
||
|
|
>
|
||
|
|
<slot :isSensitive="isSensitive">
|
||
|
|
<CursorArrowRaysIcon v-if="!isSensitive" class="h-5 w-5" />
|
||
|
|
<CursorArrowRippleIcon v-else class="h-5 w-5" />
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { CursorArrowRaysIcon, CursorArrowRippleIcon } from "@heroicons/vue/24/outline";
|
||
|
|
import { defineComponent } from "vue";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
light: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
action: {
|
||
|
|
type: String,
|
||
|
|
default: "Bestätigung",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: ["click:first", "click:submit", "click:reset"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isSensitive: false as boolean,
|
||
|
|
timeout: undefined as any,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
beforeUnmount() {
|
||
|
|
try {
|
||
|
|
clearTimeout(this.timeout);
|
||
|
|
} catch (error) {}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick() {
|
||
|
|
if (this.isSensitive) {
|
||
|
|
clearTimeout(this.timeout);
|
||
|
|
this.isSensitive = false;
|
||
|
|
this.$emit("click:submit");
|
||
|
|
} else {
|
||
|
|
this.timeout = setTimeout(() => {
|
||
|
|
this.isSensitive = true;
|
||
|
|
this.$emit("click:first");
|
||
|
|
|
||
|
|
this.timeout = setTimeout(() => {
|
||
|
|
this.isSensitive = false;
|
||
|
|
this.$emit("click:reset");
|
||
|
|
}, 2000);
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|