通过另一个文件调用模块化窗口组件

Question

大家请告诉我如何实现模式窗口方法。
假设我在主要组件中有：

<button @click="Modal">open</button>.

我想让它打开和关闭。即所有逻辑如下：按 esc 关闭，单击模式外部，单击十字。位于模态窗口内，这样我就不会将所有参考拖到身后。

这不方便。我只想单击以拉动整个组件，并且它将在模式窗口组件内打开和关闭。我试图做一个大的道具，我将按钮本身转移到模式窗口，但我不喜欢这种方法，因为我可以在模式窗口中打开关闭，而不是在其他文件中写入引用。
看看我如何尝试获得近似结果：play.vuejs.org 但我不喜欢这种方法，因为我必须将样式塞进道具等中。

我正在努力实现这个结果：

<script setup>
import Modal from './Modal';
</sctipt>  
<template>
<button @click="Modal">Open Modal</button>
<Modal v-if="Modal">data...</Modal>
</template>

能达到想要的效果吗？你能告诉我该往哪边挖吗？

Answer 1

要实现在模态窗口组件本身中打开和关闭模态窗口的所需结果，而不需要在父组件中直接传递 props 或使用 refs，您可以利用 Vue 的反应性系统以及事件处理。

以下是如何实现此目标的示例：

<template>
  <button @click="openModal">Open Modal</button>
  <Modal :show="modalVisible" @close="closeModal">Modal content...</Modal>
</template>

<script setup>
import { ref } from 'vue';
import Modal from './Modal';

const modalVisible = ref(false);

const openModal = () => {
  modalVisible.value = true;
};

const closeModal = () => {
  modalVisible.value = false;
};
</script>

你的模态组件看起来像这样：

<template>
  <div v-if="show" class="modal-overlay" @click="closeModalOutside">
    <div class="modal-content">
      <button class="close-button" @click="closeModal">X</button>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const show = ref(false);

const closeModalOutside = (event) => {
  if (event.target.classList.contains('modal-overlay')) {
    close();
  }
};

const closeModal = () => {
  show.value = false;
  emit('close');
};

watch(() => props.show, (newValue) => {
  show.value = newValue;
});
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
</style>

这种方法将模态逻辑封装在 Modal 组件中，避免了在父组件中直接传递 props 或使用 ref 的需要。