perf(components): modal automatically focuses after opening

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/591/head
Ryan Wang 2022-07-26 15:41:08 +08:00
parent 7405b57c6d
commit e2712265d7
2 changed files with 16 additions and 3 deletions

View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { PropType } from "vue";
import { computed, ref } from "vue";
import { computed, nextTick, ref, watch } from "vue";
import { IconClose } from "../../icons/icons";
const props = defineProps({
@ -27,6 +27,7 @@ const props = defineProps({
const emit = defineEmits(["update:visible", "close"]);
const rootVisible = ref(false);
const modelWrapper = ref<HTMLElement>();
const wrapperClasses = computed(() => {
return {
@ -44,11 +45,23 @@ function handleClose() {
emit("update:visible", false);
emit("close");
}
watch(
() => props.visible,
() => {
if (props.visible) {
nextTick(() => {
modelWrapper.value?.focus();
});
}
}
);
</script>
<template>
<Teleport :disabled="true" to="body">
<div
v-show="rootVisible"
ref="modelWrapper"
:class="wrapperClasses"
aria-modal="true"
class="modal-wrapper"

View File

@ -13,14 +13,14 @@ import {
VTabItem,
VTabs,
} from "@halo-dev/components";
import { computed, onMounted, ref } from "vue";
import { computed, onMounted, ref, shallowRef } from "vue";
const activeId = ref("general");
const deviceActiveId = ref("desktop");
const attachmentSelectVisible = ref(false);
const settingRootVisible = ref(false);
const settingVisible = ref(false);
const devices = ref([
const devices = shallowRef([
{
id: "desktop",
icon: IconComputer,