2024-02-11
https://gyazo.com/6994485b194a4816292e5a7d0fa4652a
https://gyazo.com/2c7274b2f0ab5f45763e6ec34bed250bhttps://gyazo.com/c56b188896c198ce73585f5220c7ec00https://gyazo.com/9b16c7bbe88e877f9f5e3129f131ee9b
伝串うまい
https://gyazo.com/d3e8998795b82398e177b0b607301839
これだけ払っても返ってくるのが10万までというと泣けてくる
居間のソファで昼寝して起きたら台所で何らかをしてる妻と娘から「こっち見んな!」とのご連絡をいただきました 親に気兼ねなく値が張るもの送れるようになったの、家族を養う中でも経済的ゆとりができたなぁと素直に感じますよ オンラインでは話せないようなディープな話題も合った模様 code:VueUseFocusTrap.vue.html
<script setup lang="ts">
import { watch, ref, onUnmounted } from "vue";
import { createFocusTrap } from "focus-trap";
import type { FocusTrap } from "focus-trap";
import { unrefElement } from "@vueuse/core";
let trap: undefined | FocusTrap;
const target = ref<HTMLElement | null>(null);
const activate = () => trap && trap.activate();
const deactivate = () => trap && trap.deactivate();
export type VueUseFocusTrapProps = {
as?: keyof HTMLElementTagNameMap;
};
withDefaults(defineProps<VueUseFocusTrapProps>(), {
as: 'div',
});
watch(
() => unrefElement(target),
(el) => {
if (!el) return;
trap = createFocusTrap(el, { fallbackFocus: el });
activate();
},
{ flush: "post" }
);
onUnmounted(() => deactivate());
</script>
<template>
<component :is="as" ref="target" :class="$style.root">
<slot />
</component>
</template>
<style module scoped>
.root {
display: contents;
}
</style>