chore: 添加多个组件在 FaModal 中使用的示例

Author: hooray

apps/example/src/views/component_example/dropdown/_demo3.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const modal = shallowRef(false)
+
+function handleClick(text: string) {
+  faToast(text)
+}
+
+const items = [
+  [
+    { label: 'Preview', icon: 'i-lucide:eye', handle: () => handleClick('Preview') },
+    { label: 'Duplicate', icon: 'i-lucide:copy', handle: () => handleClick('Duplicate') },
+  ],
+  [
+    {
+      label: 'More',
+      items: [
+        [
+          { label: 'Share', handle: () => handleClick('Share') },
+        ],
+        [
+          { label: 'Delete', variant: 'destructive' as const, handle: () => handleClick('Delete') },
+        ],
+      ],
+    },
+  ],
+]
+</script>
+
+<template>
+  <div>
+    <FaButton @click="modal = true">
+      打开
+    </FaButton>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的下拉菜单"
+      description="在模态框内容区内触发 FaDropdown"
+      :footer="false"
+      class="sm:max-w-2xl"
+      content-class="min-h-auto"
+    >
+      <div class="py-6 flex-center">
+        <FaDropdown :items="items">
+          <FaButton>
+            Actions
+            <FaIcon name="i-ep:caret-bottom" />
+          </FaButton>
+        </FaDropdown>
+      </div>
+    </FaModal>
+  </div>
+</template>

apps/example/src/views/component_example/dropdown/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
+import Demo3 from './_demo3.vue'
 </script>
 
 <template>
@@ -16,5 +17,10 @@ import Demo2 from './_demo2.vue'
         <Demo2 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo3 />
+      </div>
+    </FaPageMain>
   </div>
 </template>

apps/example/src/views/component_example/image_preview/_demo3.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const modal = ref(false)
+</script>
+
+<template>
+  <div>
+    <FaButton @click="modal = true">
+      打开
+    </FaButton>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的图片预览"
+      description="点击图片后仍可继续进入全屏预览"
+      :footer="false"
+      class="sm:max-w-3xl"
+      content-class="min-h-auto"
+    >
+      <div class="py-4 flex-center">
+        <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" />
+      </div>
+    </FaModal>
+  </div>
+</template>

apps/example/src/views/component_example/image_preview/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
+import Demo3 from './_demo3.vue'
 </script>
 
 <template>
@@ -16,5 +17,10 @@ import Demo2 from './_demo2.vue'
         <Demo2 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo3 />
+      </div>
+    </FaPageMain>
   </div>
 </template>

apps/example/src/views/component_example/select/_demo4.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const modal = shallowRef(false)
+const cityInFaModal = shallowRef('shanghai')
+
+const options = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="flex gap-2">
+      <FaButton @click="modal = true">
+        打开 FaModal
+      </FaButton>
+    </div>
+    <FaModal
+      v-model="modal"
+      title="FaModal 中的选择器"
+      description="在模态框内容区内使用 FaSelect"
+      :footer="false"
+      class="sm:max-w-lg"
+      content-class="min-h-auto"
+    >
+      <div class="py-4 flex flex-col gap-4">
+        <FaSelect
+          v-model="cityInFaModal"
+          :options="options"
+          placeholder="请选择城市"
+          class="w-full"
+        />
+        <div class="text-sm text-muted-foreground">
+          当前值：{{ cityInFaModal }}
+        </div>
+      </div>
+    </FaModal>
+  </div>
+</template>

apps/example/src/views/component_example/select/index.vue

@@ -2,6 +2,7 @@
 import Demo1 from './_demo1.vue'
 import Demo2 from './_demo2.vue'
 import Demo3 from './_demo3.vue'
+import Demo4 from './_demo4.vue'
 </script>
 
 <template>
@@ -22,5 +23,10 @@ import Demo3 from './_demo3.vue'
         <Demo3 />
       </div>
     </FaPageMain>
+    <FaPageMain title="在 FaModal 里展示" main-class="p-0">
+      <div class="p-4">
+        <Demo4 />
+      </div>
+    </FaPageMain>
   </div>
 </template>