diff options
Diffstat (limited to 'packages/frontend/src/components/MkButton.vue')
| -rw-r--r-- | packages/frontend/src/components/MkButton.vue | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index bcd58ae516..8b176eedaa 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { nextTick, onMounted } from 'vue'; +import { nextTick, onMounted, shallowRef } from 'vue'; const props = defineProps<{ type?: 'button' | 'submit' | 'reset'; @@ -59,13 +59,13 @@ const emit = defineEmits<{ (ev: 'click', payload: MouseEvent): void; }>(); -let el = $shallowRef<HTMLElement | null>(null); -let ripples = $shallowRef<HTMLElement | null>(null); +const el = shallowRef<HTMLElement | null>(null); +const ripples = shallowRef<HTMLElement | null>(null); onMounted(() => { if (props.autofocus) { nextTick(() => { - el!.focus(); + el.value!.focus(); }); } }); @@ -88,11 +88,11 @@ function onMousedown(evt: MouseEvent): void { const rect = target.getBoundingClientRect(); const ripple = document.createElement('div'); - ripple.classList.add(ripples!.dataset.childrenClass!); + ripple.classList.add(ripples.value!.dataset.childrenClass!); ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px'; ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px'; - ripples!.appendChild(ripple); + ripples.value!.appendChild(ripple); const circleCenterX = evt.clientX - rect.left; const circleCenterY = evt.clientY - rect.top; @@ -107,7 +107,7 @@ function onMousedown(evt: MouseEvent): void { ripple.style.opacity = '0'; }, 1000); window.setTimeout(() => { - if (ripples) ripples.removeChild(ripple); + if (ripples.value) ripples.value.removeChild(ripple); }, 2000); } </script> |