u

code/g3soft-libs/docs/examples/select/custom-option.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// 不传 options 时使用默认插槽自定义选项；插槽透出 select / close
+import { ref } from 'vue'
+import { G3Select } from '@g3soft/ui'
+import { CircleCheck } from '@lucide/vue'
+
+const value = ref<string | undefined>('small')
+
+const sizes = [
+  { label: '紧凑', value: 'small', desc: '适合信息密度高的表格' },
+  { label: '标准', value: 'medium', desc: '默认尺寸' },
+  { label: '宽松', value: 'large', desc: '适合触屏与展示页' },
+]
+</script>
+
+<template>
+  <div style="width: 280px">
+    <G3Select v-model="value" placeholder="选择密度" filterable>
+      <template #default="{ select, close }">
+        <div style="padding: 4px">
+          <div
+            v-for="size in sizes"
+            :key="size.value"
+            style="display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer"
+            @click="
+              () => {
+                select(size.value)
+                close()
+              }
+            "
+          >
+            <CircleCheck v-if="value === size.value" :size="14" />
+            <span v-else style="width: 14px" />
+            <span style="flex: 1">
+              <strong style="font-size: 13px">{{ size.label }}</strong>
+              <span style="display: block; color: #6b7280; font-size: 12px">{{ size.desc }}</span>
+            </span>
+          </div>
+        </div>
+      </template>
+    </G3Select>
+  </div>
+</template>