Skip to content

Commit 454ccbb

Browse files
qianmoQqianmoQ
committed
feat(选择器): 支持搜索功能
1 parent 6db4fe7 commit 454ccbb

File tree

7 files changed

+280
-48
lines changed

7 files changed

+280
-48
lines changed

‎docs/components/form/select.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,81 @@ const defaultSelectOptions = [
267267

268268
:::
269269

270+
## 搜索 (search)
271+
272+
::: raw
273+
274+
<CodeRunner title="搜索 (search)">
275+
<div class="space-y-4">
276+
<div>
277+
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">普通搜索</p>
278+
<ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" :dark="darkMode" />
279+
</div>
280+
<div>
281+
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">多选搜索</p>
282+
<ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" :dark="darkMode" />
283+
</div>
284+
<div>
285+
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索</p>
286+
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
287+
<ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" :dark="darkMode" />
288+
</div>
289+
</div>
290+
</div>
291+
</CodeRunner>
292+
293+
:::
294+
295+
::: details 查看代码
296+
297+
```vue
298+
<template>
299+
<div class="space-y-4">
300+
<div>
301+
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">普通搜索</p>
302+
<ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" :dark="darkMode" />
303+
</div>
304+
<div>
305+
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">多选搜索</p>
306+
<ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" :dark="darkMode" />
307+
</div>
308+
<div>
309+
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索</p>
310+
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
311+
<ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" :dark="darkMode" />
312+
</div>
313+
</div>
314+
</div>
315+
</template>
316+
317+
<script setup lang="ts">
318+
import { useData } from 'vitepress'
319+
import { computed, ref } from 'vue'
320+
321+
const { isDark } = useData()
322+
const darkMode = computed(() => isDark.value)
323+
324+
const searchSelectValue = ref('')
325+
const searchMultiValue = ref([])
326+
const searchGlassValue = ref('')
327+
328+
const citiesOptions = [
329+
{ value: 'beijing', label: '北京' },
330+
{ value: 'shanghai', label: '上海' },
331+
{ value: 'guangzhou', label: '广州' },
332+
{ value: 'shenzhen', label: '深圳' },
333+
{ value: 'hangzhou', label: '杭州' },
334+
{ value: 'nanjing', label: '南京' },
335+
{ value: 'chengdu', label: '成都' },
336+
{ value: 'chongqing', label: '重庆' },
337+
{ value: 'wuhan', label: '武汉' },
338+
{ value: 'xian', label: '西安' }
339+
]
340+
</script>
341+
```
342+
343+
:::
344+
270345
## 液态玻璃效果 (glass)
271346

272347
::: raw
@@ -468,6 +543,8 @@ loadMoreData((children) => {
468543
['loadData', '懒加载数据函数', 'function', '-', '-'],
469544
['dark', '暗黑模式', 'boolean', 'false', '-'],
470545
['glass', '液态玻璃效果', 'boolean', 'false', '-'],
546+
['search', '是否启用搜索功能', 'boolean', 'false', 'true | false'],
547+
['searchPlaceholder', '搜索框占位符', 'string', '搜索...', '-'],
471548
]">
472549
</ApiTable>
473550

@@ -562,4 +639,21 @@ const onClick = () => {
562639

563640
const glassSelectValue = ref(null)
564641
const glassMultiValue = ref([])
642+
643+
const searchSelectValue = ref('')
644+
const searchMultiValue = ref([])
645+
const searchGlassValue = ref('')
646+
647+
const citiesOptions = [
648+
{ value: 'beijing', label: '北京' },
649+
{ value: 'shanghai', label: '上海' },
650+
{ value: 'guangzhou', label: '广州' },
651+
{ value: 'shenzhen', label: '深圳' },
652+
{ value: 'hangzhou', label: '杭州' },
653+
{ value: 'nanjing', label: '南京' },
654+
{ value: 'chengdu', label: '成都' },
655+
{ value: 'chongqing', label: '重庆' },
656+
{ value: 'wuhan', label: '武汉' },
657+
{ value: 'xian', label: '西安' }
658+
]
565659
</script>

‎playground/src/example/select/search.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="space-y-6">
3+
<div class="relative">
4+
<div class="space-y-4">
5+
<div>
6+
<p class="text-sm mb-2 text-gray-700">普通搜索选择器</p>
7+
<ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" />
8+
</div>
9+
<div>
10+
<p class="text-sm mb-2 text-gray-700">多选搜索选择器</p>
11+
<ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" />
12+
</div>
13+
</div>
14+
</div>
15+
<div class="relative">
16+
<div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-indigo-400">
17+
<div class="p-8 rounded-lg bg-white/50">
18+
<div class="space-y-4">
19+
<div>
20+
<p class="text-sm mb-2 text-gray-700">液态玻璃搜索选择器</p>
21+
<ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" />
22+
</div>
23+
<div>
24+
<p class="text-sm mb-2 text-gray-700">液态玻璃多选搜索选择器</p>
25+
<ShadcnSelect v-model="searchGlassMultiValue" :options="citiesOptions" search multiple glass placeholder="请搜索并选择多个城市" />
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</template>
33+
34+
<script setup lang="ts">
35+
import { ref } from 'vue'
36+
37+
const searchSelectValue = ref('')
38+
const searchMultiValue = ref([])
39+
const searchGlassValue = ref('')
40+
const searchGlassMultiValue = ref([])
41+
42+
const citiesOptions = [
43+
{ value: 'beijing', label: '北京' },
44+
{ value: 'shanghai', label: '上海' },
45+
{ value: 'guangzhou', label: '广州' },
46+
{ value: 'shenzhen', label: '深圳' },
47+
{ value: 'hangzhou', label: '杭州' },
48+
{ value: 'nanjing', label: '南京' },
49+
{ value: 'chengdu', label: '成都' },
50+
{ value: 'chongqing', label: '重庆' },
51+
{ value: 'wuhan', label: '武汉' },
52+
{ value: 'xian', label: '西安' },
53+
{ value: 'tianjin', label: '天津' },
54+
{ value: 'suzhou', label: '苏州' },
55+
{ value: 'dalian', label: '大连' },
56+
{ value: 'qingdao', label: '青岛' },
57+
{ value: 'jinan', label: '济南' }
58+
]
59+
</script>

‎src/App.vue‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,35 @@
55
</ShadcnButton>
66

77
<div class="mt-6">
8-
<h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Form 液态玻璃效果</h3>
8+
<h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Select 搜索功能</h3>
99
<div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
1010
<div class="p-8 rounded-lg bg-white/50">
11-
<ShadcnForm v-model="formData" glass :dark="isDark" @on-submit="handleSubmit">
12-
<ShadcnFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
13-
<ShadcnInput v-model="formData.username" placeholder="请输入用户名" glass :dark="isDark" />
14-
</ShadcnFormItem>
15-
<ShadcnFormItem label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]">
16-
<ShadcnInput v-model="formData.email" placeholder="请输入邮箱" glass :dark="isDark" />
17-
</ShadcnFormItem>
18-
<ShadcnFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少6位' }]">
19-
<ShadcnInput v-model="formData.password" type="password" placeholder="请输入密码" glass :dark="isDark" />
20-
</ShadcnFormItem>
21-
<ShadcnButton type="submit" glass :dark="isDark">提交</ShadcnButton>
22-
</ShadcnForm>
11+
<div class="space-y-4">
12+
<div>
13+
<label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">普通搜索选择器</label>
14+
<ShadcnSelect v-model="selectedValue1" search placeholder="请选择" :dark="isDark">
15+
<template #options>
16+
<ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" />
17+
</template>
18+
</ShadcnSelect>
19+
</div>
20+
<div>
21+
<label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索选择器</label>
22+
<ShadcnSelect v-model="selectedValue2" search glass placeholder="请选择" :dark="isDark">
23+
<template #options>
24+
<ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" glass />
25+
</template>
26+
</ShadcnSelect>
27+
</div>
28+
<div>
29+
<label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">多选搜索选择器</label>
30+
<ShadcnSelect v-model="selectedValue3" search multiple glass placeholder="请选择多个城市" :dark="isDark">
31+
<template #options>
32+
<ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" glass />
33+
</template>
34+
</ShadcnSelect>
35+
</div>
36+
</div>
2337
</div>
2438
</div>
2539
</div>
@@ -30,17 +44,25 @@
3044
<script setup lang="ts">
3145
import { ref } from 'vue'
3246
import { ShadcnButton } from "@/ui/button"
33-
import { ShadcnForm, ShadcnFormItem } from "@/ui/form"
34-
import { ShadcnInput } from "@/ui/input"
47+
import { ShadcnSelect, ShadcnSelectOption } from "@/ui/select"
3548
3649
const isDark = ref(false)
37-
const formData = ref({
38-
username: '',
39-
email: '',
40-
password: ''
41-
})
50+
const selectedValue1 = ref('')
51+
const selectedValue2 = ref('')
52+
const selectedValue3 = ref([])
4253
43-
const handleSubmit = (data: any) => {
44-
console.log('提交数据:', data)
45-
}
54+
const cities = ref([
55+
{ value: 'beijing', label: '北京' },
56+
{ value: 'shanghai', label: '上海' },
57+
{ value: 'guangzhou', label: '广州' },
58+
{ value: 'shenzhen', label: '深圳' },
59+
{ value: 'hangzhou', label: '杭州' },
60+
{ value: 'nanjing', label: '南京' },
61+
{ value: 'chengdu', label: '成都' },
62+
{ value: 'chongqing', label: '重庆' },
63+
{ value: 'wuhan', label: '武汉' },
64+
{ value: 'xian', label: '西安' },
65+
{ value: 'tianjin', label: '天津' },
66+
{ value: 'suzhou', label: '苏州' }
67+
])
4668
</script>

‎src/ui/input/ShadcnInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
glass && 'backdrop-blur-xl backdrop-saturate-150',
44
glass && 'border-white/20',
55
glass && 'shadow-lg shadow-black/5',
6-
glass ? (dark ? 'bg-white/10' : 'bg-white/80') : (dark ? 'border-gray-600 active:border-gray-500 hover:border-gray-500 bg-gray-800' : 'border-gray-300 active:border-blue-400 hover:border-blue-400')
6+
glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'border-gray-600 active:border-gray-500 hover:border-gray-500 bg-gray-800' : 'border-gray-300 active:border-blue-400 hover:border-blue-400')
77
]"
88
@mouseenter="hovered = true"
99
@mouseleave="hovered = false">

0 commit comments

Comments
 (0)