如何创建像macOS设置应用程序一样的模态

问：

这是一个参考

我有一个示例结构来描述我希望它的外观，但我不知道如何实现它。

下面是一个结构示例

<Modal ref="modal" @close="close()">
  <!-- 
    the names of the tabs automatically go to the sidebar (only first-level tabs), their structure is as follows:
    <div class="sidebar">
      <span> tab1 </span>
      <span> tab2 </span>
      ...
    <div> 
    these tabs in sidebar is created automatically in Modal component based on tab names from <ModalTab       name="tabName">
    clicking on span goes to tab with same name (like modal.goto('tab1'))
  -->

  <ModalTab name="tab1">
    <template #content>
      tab1 content

      <button @click="modal.goto('childTab1')">go to childTab1</button>
      <button @click="modal.goto('childTab2')">go to childTab2</button>
    </template>

    <ModalTab name="childTab1" @goback="doSome()"> <!-- "goback" emit triggers when back arrow is clicked, then it goes back to "tab1", and you can change some data inside modal -->
      <template #content>
        child content
      </template>

      <template #footer>
        <button @click="saveInnerData(), modal.goto('tab1')">save inner data</button>
      </template>
    </ModalTab>

    <ModalTab name="childTab2" @goback="doSome()"> <!-- "goback" emit triggers when back arrow is clicked, then it goes back to "tab1", and you can change some data inside modal -->
      <template #content>
        child content
      </template>
      
      <!-- child footer that displays when child tab is active -->
      <template #footer>
        <button @click="saveInnerData(), modal.goto('tab1')">save inner data</button>
      </template>
    </ModalTab>
  </ModalTab>

  <ModalTab name="tab2">
    <template #content>
      content
    </template>
  </ModalTab>
  
  <!-- main footer that displays one of first level tabs is active -->
  <template #footer>
    <button @click="saveAndClose()">save</button>
  </template>
</Modal>

如您所见，有两个组件：Modal 和 ModalTab。在 ModalTab 中，当其中一个 childTab 处于活动状态时，将显示后退箭头。此外，当其中一个 childTabs 处于活动状态时，不会呈现主选项卡的内容。我想这可以通过自定义组件插件来完成，它允许一次导入多个组件，就像甚至全局导入两个组件一样。import {Modal, ModalTab} from 'myCustomModal