效果

基礎用法（分組選項）

高級用法（帶Tab欄）

<!-- 彈窗跟隨通用組件  SmartSelector.vue -->
<!-- 彈窗跟隨通用組件 -->
<template><div class="smart-selector-container"><el-popover :visible="visible" :width="width" :placement="placement" trigger="manual" :popper-class="popperClass"@show="$emit('open')" @hide="$emit('close')"><template #reference><el-input ref="inputRef" v-model="selectedText" :placeholder="placeholder" :style="{ width: inputWidth }":type="multiline ? 'textarea' : 'text'" :autosize="autosize" :size="size" :readonly="readonly"@click="togglePopup"><template #suffix><el-icon><arrow-down /></el-icon></template></el-input></template><div class="smart-selector-content"><!-- Tab欄 --><el-tabs v-if="hasTabs" v-model="activeTab" @tab-click="handleTabChange"><el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" /></el-tabs><el-scrollbar :max-height="maxHeight"><!-- 分組選項 --><template v-for="(group, index) in currentGroups" :key="index"><div v-if="group.title" class="group-title">{{ group.title }}</div><div class="options-grid"><div v-for="(item, itemIndex) in group.options" :key="itemIndex" class="option-item":class="{ 'is-selected': isSelected(item) }" @click="handleSelect(item)">{{ getOptionLabel(item) }}</div></div><el-divider v-if="index < currentGroups.length - 1" /></template></el-scrollbar></div></el-popover></div>
</template><script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'const props = defineProps({modelValue: { type: [String, Array], default: '' },options: { type: Array, default: () => [] },groups: { type: Array, default: () => [] }, // 分組格式: [{title: '分組1', options: [...]}]tabs: { type: Array, default: () => [] }, // Tab格式: [{name: 'tab1', label: 'Tab1', options: [...]}]placeholder: { type: String, default: '請選擇' },width: { type: String, default: '500px' },inputWidth: { type: String, default: '200px' },maxHeight: { type: String, default: '300px' },separator: { type: String, default: '，' },multiline: Boolean,autosize: { type: [Object, Boolean], default: () => ({ minRows: 2, maxRows: 4 }) },placement: { type: String, default: 'bottom-start' },readonly: { type: Boolean, default: false },popperClass: String,size: {type: String, default: 'default', validator: (value: string) => ['large', 'default', 'small'].includes(value)},singleSelect: Boolean, // 是否單選模式
})const emit = defineEmits(['update:modelValue', 'select', 'open', 'close', 'tab-change'])const inputRef = ref<HTMLElement | null>(null)
const popoverRef = ref<HTMLElement | null>(null)
const visible = ref(false)
const activeTab: any = ref('')const tabs: any = props.tabs || []const hasTabs = computed(() => tabs.length > 0)
const currentGroups = computed(() => {if (hasTabs.value) {const tab = tabs.value.find((t: any) => t.name === activeTab.value)if (tab?.groups) return tab.groupsif (tab?.options) return [{ options: tab.options }]return []}return props.groups.length > 0 ? props.groups : [{ options: props.options }]
})const selectedText = computed({get: () => {if (Array.isArray(props.modelValue)) {return props.modelValue.join(props.separator)}return props.modelValue || ''},set: (val) => emit('update:modelValue', val)
})// 初始化第一個Tab
if (hasTabs.value) {activeTab.value = tabs.value[0].name
}const togglePopup = () => {visible.value = !visible.value
}// 獲取選項顯示文本
const getOptionLabel = (item: any) => {return item?.label || item?.value || item
}// 檢查是否已選中
const isSelected = (item: any) => {const value = item.value || item.label || itemif (Array.isArray(props.modelValue)) {return props.modelValue.includes(value)}return props.modelValue === value
}const handleSelect = (item: any) => {const value = item?.value || item?.label || itemif (props.singleSelect) {// 單選模式emit('update:modelValue', value)} else {// 多選模式if (Array.isArray(props.modelValue)) {const newValue = props.modelValue.includes(value)? props.modelValue.filter(v => v !== value): [...props.modelValue, value]emit('update:modelValue', newValue)} else {const currentValue = props.modelValue || ''if (currentValue.includes(value)) returnconst newValue = currentValue? `${currentValue}${props.separator}${value}`: valueemit('update:modelValue', newValue)}}emit('select', item)if (props.singleSelect) {visible.value = false}
}const handleTabChange = (tab: any) => {activeTab.value = tab.props.nameemit('tab-change', tab.props.name)
}// 處理鍵盤事件
const handleKeydown = (e: any) => {if (e.key === 'Escape') {visible.value = false}
}onMounted(() => {document.addEventListener('keydown', handleKeydown)
})onUnmounted(() => {document.removeEventListener('keydown', handleKeydown)
})
</script><style scoped lang="scss">
.smart-selector-container {position: relative;display: inline-block;
}.smart-selector-content {padding: 8px;:deep(.el-tabs__header) {margin: 0 0 12px 0;}
}.group-title {padding: 8px 0;font-weight: bold;color: var(--el-color-primary);
}.options-grid {display: flex;flex-wrap: wrap;gap: 8px;padding: 4px 0;
}.option-item {padding: 6px 12px;background: #f5f7fa;border-radius: 4px;cursor: pointer;transition: all 0.2s;white-space: nowrap;font-size: 14px;&:hover {background: var(--el-color-primary);color: white;transform: translateY(-1px);}&.is-selected {background: var(--el-color-primary);color: white;}
}:deep(.el-divider--horizontal) {margin: 12px 0;
}/**使用示例<SmartSelectorv-model="form.symptom":options="options"placeholder="癥狀/主訴"/>數據傳參格式純字符串格式（最簡單）const options = ['頭痛', '發熱', '咳嗽']簡約對象格式const options = [{ label: '頭痛' }, { value: '發熱' }, '咳嗽' // 混合格式也可以]標準對象格式const options = [{ label: '頭痛', value: 'headache' },{ label: '發熱', value: 'fever' }]基礎用法（分組選項）：<template><SmartSelectorv-model="form.symptom":groups="symptomGroups"placeholder="癥狀/主訴"separator="，"multiline:autosize="{ minRows: 2, maxRows: 6 }"@select="handleSelect"/></template><script setup>import { ref } from 'vue'import SmartSelector from '@/components/popup/SmartSelector.vue'const form = ref({symptom: ''})const symptomGroups = ref([{title: '常見癥狀',options: [{ label: '頭痛', value: '頭痛' },{ label: '發熱', value: '發熱' },{ label: '咳嗽', value: '咳嗽' }]},{title: '特殊癥狀',options: [{ label: '心悸', value: '心悸' },{ label: '氣短', value: '氣短' },{ label: '胸悶', value: '胸悶' }]}])const handleSelect = (item) => {console.log('選中:', item)}</script>高級用法（帶Tab欄）：<template><SmartSelectorv-model="form.symptom":tabs="symptomTabs"placeholder="癥狀/主訴"separator="，"width="600px"@select="handleSelect"@tab-change="handleTabChange"/></template><script setup>import { ref } from 'vue'import SmartSelector from '@/components/popup/SmartSelector.vue'const form = ref({symptom: ''})const symptomTabs = ref([{name: 'common',label: '常見癥狀',options: [{ label: '頭痛', value: '頭痛' },{ label: '發熱', value: '發熱' },{ label: '咳嗽', value: '咳嗽' }]},{name: 'special',label: '特殊癥狀',groups: [{title: '心血管癥狀',options: [{ label: '心悸', value: '心悸' },{ label: '胸悶', value: '胸悶' }]},{title: '呼吸癥狀',options: [{ label: '氣短', value: '氣短' },{ label: '呼吸困難', value: '呼吸困難' }]}]}])const handleSelect = (item) => {console.log('選中:', item)}const handleTabChange = (tabName) => {console.log('切換到Tab:', tabName)}</script>*/
</style>