Skip to content

Commit d546e73

Browse files
fxss5201fxss5201
committed
:sparkles :feat: Select 相关实例
1 parent 61a38a2 commit d546e73

File tree

7 files changed

+269
-11
lines changed

7 files changed

+269
-11
lines changed

‎package-lock.json

Lines changed: 9 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"dependencies": {
1111
"ant-design-vue": "^1.6.4",
1212
"core-js": "^3.6.5",
13+
"highlight.js": "^10.1.2",
1314
"vue": "^2.6.11",
1415
"vue-meta": "^2.4.0",
1516
"vue-router": "^3.2.0",

‎src/App.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,5 +142,11 @@ export default {
142142
h6 {
143143
font-size: 14px;
144144
}
145+
146+
.sd {
147+
margin: 0 0.5em;
148+
padding: 0 0.5em;
149+
background-color: #eee;
150+
}
145151
}
146152
</style>

‎src/config/lazy_use.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,18 @@ import {
44
Button,
55
Layout,
66
Menu,
7-
Icon
7+
Icon,
8+
Select,
9+
Divider,
10+
Row,
11+
Col
812
} from 'ant-design-vue'
913

1014
Vue.use(Button)
1115
Vue.use(Layout)
1216
Vue.use(Menu)
1317
Vue.use(Icon)
18+
Vue.use(Select)
19+
Vue.use(Divider)
20+
Vue.use(Row)
21+
Vue.use(Col)

‎src/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import router from './router'
44
import store from './store'
55
import './config/lazy_use'
66

7+
import hljs from 'highlight.js'
8+
import javascript from 'highlight.js/lib/languages/javascript'
9+
import 'highlight.js/styles/github.css'
10+
import 'highlight.js/styles/vs2015.css'
11+
hljs.registerLanguage('javascript', javascript)
12+
713
Vue.config.productionTip = false
14+
Vue.prototype.$hljs = hljs
815

916
new Vue({
1017
router,

‎src/views/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="home">
33
<h1>项目介绍</h1>
4-
<p>本项目主要是用于展示在 <a href="https://www.fxss.work/vue-blog/">https://www.fxss.work/vue-blog/</a> 个人博客中使用到关于 ant-design-vue 的实例。</p>
4+
<p>本项目主要是用于展示在 <a href="https://www.fxss.work/vue-blog/" target="_blank">https://www.fxss.work/vue-blog/</a> 个人博客中使用到关于 ant-design-vue 的实例。</p>
55
</div>
66
</template>
77

‎src/views/Select.vue

Lines changed: 236 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,246 @@
11
<template>
22
<div class="page-select">
33
<h1>Select 相关实例</h1>
4+
<p>以下例子中的<code class="sd">options</code>对应的内容统一如下：</p>
5+
<p>
6+
<pre class="hljs"><code class="javascript">const options = [
7+
{
8+
name: '北京',
9+
id: '00001',
10+
spell: 'beijing',
11+
simpleSpell: 'bj'
12+
},
13+
{
14+
name: '上海',
15+
id: '00002',
16+
spell: 'shanghai',
17+
simpleSpell: 'sh'
18+
},
19+
{
20+
name: '广东',
21+
id: '00003',
22+
spell: 'guangdong',
23+
simpleSpell: 'gd'
24+
},
25+
{
26+
name: '深圳',
27+
id: '00004',
28+
spell: 'shenzhen',
29+
simpleSpell: 'sz'
30+
},
31+
{
32+
name: '重庆',
33+
id: '00005',
34+
spell: 'chongqing',
35+
simpleSpell: 'cq'
36+
},
37+
{
38+
name: '西安',
39+
id: '00006',
40+
spell: 'xian',
41+
simpleSpell: 'xa'
42+
}
43+
]</code></pre>
44+
</p>
45+
<a-divider />
46+
<h2>设置默认值</h2>
47+
<a-row :gutter="16">
48+
<a-col :span="12">
49+
设置默认值或者当前选中值为空字符串<code class="sd">''</code>的时候会影响<code class="sd">placeholder</code>的展示。
50+
</a-col>
51+
<a-col :span="12">
52+
<a-select
53+
:default-value="''"
54+
showSearch
55+
placeholder="请选择选项"
56+
style="width: 120px; margin-right: 16px">
57+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
58+
{{ item.name }}
59+
</a-select-option>
60+
</a-select>
61+
<a-select
62+
:value="''"
63+
showSearch
64+
placeholder="请选择选项"
65+
style="width: 120px">
66+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
67+
{{ item.name }}
68+
</a-select-option>
69+
</a-select>
70+
</a-col>
71+
</a-row>
72+
<a-row :gutter="16">
73+
<a-col :span="12">
74+
设置默认值或者当前选中值为<code class="sd">null</code>的时候会影响<code class="sd">placeholder</code>的展示。
75+
</a-col>
76+
<a-col :span="12">
77+
<a-select
78+
:default-value="null"
79+
showSearch
80+
placeholder="请选择选项"
81+
style="width: 120px; margin-right: 16px">
82+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
83+
{{ item.name }}
84+
</a-select-option>
85+
</a-select>
86+
<a-select
87+
:value="null"
88+
showSearch
89+
placeholder="请选择选项"
90+
style="width: 120px">
91+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
92+
{{ item.name }}
93+
</a-select-option>
94+
</a-select>
95+
</a-col>
96+
</a-row>
97+
<a-row :gutter="16">
98+
<a-col :span="12">
99+
设置默认值或者当前选中值为<code class="sd">undefined</code>的时候，<code class="sd">placeholder</code>正常展示。
100+
</a-col>
101+
<a-col :span="12">
102+
<a-select
103+
:default-value="undefined"
104+
showSearch
105+
placeholder="请选择选项"
106+
style="width: 120px; margin-right: 16px">
107+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
108+
{{ item.name }}
109+
</a-select-option>
110+
</a-select>
111+
<a-select
112+
:value="undefined"
113+
showSearch
114+
placeholder="请选择选项"
115+
style="width: 120px">
116+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
117+
{{ item.name }}
118+
</a-select-option>
119+
</a-select>
120+
</a-col>
121+
</a-row>
122+
<a-divider />
123+
<h2>设置筛选</h2>
124+
<h3>方式一：</h3>
125+
<a-row :gutter="16">
126+
<a-col :span="12">
127+
设置<code class="sd">optionFilterProp</code>为<code class="sd">children</code>
128+
</a-col>
129+
<a-col :span="12">
130+
<a-select
131+
showSearch
132+
optionFilterProp="children"
133+
placeholder="请选择选项"
134+
style="width: 120px; margin-right: 16px">
135+
<a-select-option v-for="item in options" :key="item.code" :value="item.id">
136+
{{ item.name }}
137+
</a-select-option>
138+
</a-select>
139+
</a-col>
140+
</a-row>
141+
<h3>方式二：</h3>
142+
<a-row :gutter="16">
143+
<a-col :span="12">
144+
将<code class="sd">optionFilterProp</code>设置为<code class="sd">label</code>和<code class="sd">a-select-option</code>的<code class="sd">:label="item.name"</code>自定义属性
145+
</a-col>
146+
<a-col :span="12">
147+
<a-select
148+
showSearch
149+
optionFilterProp="label"
150+
placeholder="请选择选项"
151+
style="width: 120px; margin-right: 16px">
152+
<a-select-option v-for="item in options" :key="item.code" :value="item.id" :label="item.name">
153+
{{ item.name }}
154+
</a-select-option>
155+
</a-select>
156+
</a-col>
157+
</a-row>
158+
<h3>方式三：</h3>
159+
<a-row :gutter="16">
160+
<a-col :span="12">
161+
使用<code class="sd">filterOption</code>和<code class="sd">optionLabelProp</code>实现筛选、拼音筛选、简拼筛选
162+
</a-col>
163+
<a-col :span="12">
164+
<a-select
165+
showSearch
166+
:filterOption="filterOption"
167+
optionLabelProp="label"
168+
placeholder="请选择选项"
169+
style="width: 120px; margin-right: 16px">
170+
<a-select-option v-for="item in options" :key="item.code" :value="item.id" :label="item.name" :spell="item.spell" :simpleSpell="item.simpleSpell">
171+
{{ item.name }}
172+
</a-select-option>
173+
</a-select>
174+
</a-col>
175+
</a-row>
4176
</div>
5177
</template>
6178

7179
<script>
180+
const options = [
181+
{
182+
name: '北京',
183+
id: '00001',
184+
spell: 'beijing',
185+
simpleSpell: 'bj'
186+
},
187+
{
188+
name: '上海',
189+
id: '00002',
190+
spell: 'shanghai',
191+
simpleSpell: 'sh'
192+
},
193+
{
194+
name: '广东',
195+
id: '00003',
196+
spell: 'guangdong',
197+
simpleSpell: 'gd'
198+
},
199+
{
200+
name: '深圳',
201+
id: '00004',
202+
spell: 'shenzhen',
203+
simpleSpell: 'sz'
204+
},
205+
{
206+
name: '重庆',
207+
id: '00005',
208+
spell: 'chongqing',
209+
simpleSpell: 'cq'
210+
},
211+
{
212+
name: '西安',
213+
id: '00006',
214+
spell: 'xian',
215+
simpleSpell: 'xa'
216+
}
217+
]
218+
8219
export default {
9-
name: 'pageSelect'
220+
name: 'pageSelect',
221+
data () {
222+
return {
223+
options
224+
}
225+
},
226+
mounted () {
227+
document.querySelectorAll('pre code').forEach((block) => {
228+
this.$hljs.highlightBlock(block)
229+
})
230+
},
231+
methods: {
232+
filterOption (inputValue, option) {
233+
console.log(inputValue, option)
234+
let currentOption
235+
for (let index = 0, len = this.options.length; index < len; index++) {
236+
const element = this.options[index]
237+
if (element.id === option.componentOptions.propsData.value) {
238+
currentOption = element
239+
break
240+
}
241+
}
242+
return currentOption.name.includes(inputValue) || currentOption.spell.includes(inputValue) || currentOption.simpleSpell.includes(inputValue)
243+
}
244+
}
10245
}
11246
</script>
12-
13-
<style lang="less" scoped>
14-
.page-select {}
15-
</style>

0 commit comments

Comments
 (0)