Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit285316b

Browse files
imple content index And the Search
1 parenta3d78dc commit285316b

File tree

4 files changed

+72
-56
lines changed

4 files changed

+72
-56
lines changed

‎src/components/Content.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
</template>
88

99
<script>
10-
importVueMarkdownfrom'vue-markdown'
1110
import'highlight.js/styles/atom-one-dark.css'
1211
import'github-markdown-css'// eslint-disable-line
1312
importVuefrom'vue'
@@ -17,7 +16,6 @@ const dynamicContent = file => () => import(`../../content/${file}.md`)
1716
exportdefault {
1817
name:'Content',
1918
components: {
20-
VueMarkdown,
2119
},
2220
computed: {
2321
currentContentPage:function () {

‎src/components/Search.vue

Lines changed: 24 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,78 +3,57 @@
33
<ca-searchclass="search__input"v-model="searchInput"></ca-search>
44
<ca-data-tableclass="search__result">
55
<tbody>
6-
<tr>
7-
<th>
8-
itemA
9-
</th>
10-
<th>
11-
itemB
12-
</th>
13-
</tr>
14-
<tr>
15-
<th>
16-
itemE
17-
</th>
18-
<th>
19-
itemD
20-
</th>
21-
</tr>
6+
<trv-for='(resultItem, index) in searchResult':key='index'><th>
7+
{{resultItem.name}}
8+
</th></tr>
229
</tbody>
2310
</ca-data-table>
2411
</div>
2512
</template>
2613
<script>
27-
/* eslint-disable*/
14+
// eslint-disable-next-line
15+
import {getList, }from'../utils/contentIndex'
2816
importFusefrom'fuse.js'
2917
3018
exportdefault {
3119
name:'search',
3220
data: ()=> ({
3321
searchInput:'',
22+
searchResult: ['Nothing matches', ],
3423
fuse:null,
35-
// TODO: Generator Those data
36-
books: [{
37-
'ISBN':'A',
38-
'title':"Old Man's War",
39-
'author':'John Scalzi',
40-
}, {
41-
'ISBN':'B',
42-
'title':'The Lock Artist',
43-
'author':'Steve Hamilton',
44-
},
45-
],
46-
options: {
24+
options: {
25+
matchAllTokens:true,
4726
keys: [{
4827
name:'title',
49-
weight:0.3
28+
weight:0.3,
5029
}, {
5130
name:'author',
52-
weight:0.7
53-
}]
31+
weight:0.7,
32+
}, ],
5433
},
5534
elementInput:null,
5635
elementResult:null,
5736
}),
58-
beforeMount() {
59-
this.fuse=newFuse(this.books,this.options)
37+
watch: {
38+
searchInput:function (newValue) {
39+
this.searchResult=this.fuse.search(newValue)
40+
},
6041
},
61-
mounted() {
42+
beforeMount () {
43+
this.fuse=newFuse(getList(),this.options)
44+
},
45+
mounted () {
6246
// add focus event API to ca-search
63-
this.elementInput=document.querySelector('.search__input');
64-
this.elementResult=document.querySelector('.search__result');
65-
this.elementInput.addEventListener('focus',this.toggleResult,true);
66-
this.elementInput.addEventListener('blur',this.toggleResult,true);
47+
this.elementInput=document.querySelector('.search__input')
48+
this.elementResult=document.querySelector('.search__result')
49+
this.elementInput.addEventListener('focus',this.toggleResult,true)
50+
this.elementInput.addEventListener('blur',this.toggleResult,true)
6751
},
6852
methods: {
69-
toggleResult() {
53+
toggleResult() {
7054
this.elementResult.style.visibility=this.elementResult.style.visibility==='visible'?'hidden':'visible'
7155
},
7256
},
73-
watch: {
74-
searchInput:function(newValue) {
75-
console.log(this.fuse.search(newValue))
76-
}
77-
}
7857
}
7958
</script>
8059

‎src/components/SlideMenu.vue

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
</template>
1717

1818
<script>
19+
// eslint-disable-next-line
20+
import {getNames }from'../utils/contentIndex'
21+
1922
importsearchfrom'./Search.vue'
2023
2124
exportdefault {
@@ -24,16 +27,12 @@ export default {
2427
search,
2528
},
2629
data: ()=> ({
27-
// TODO: generator the array automatically
28-
pages: [
29-
'Accordion',
30-
'Breadcrumb',
31-
'Button',
32-
'Checkbox',
33-
'CodeSnippet',
34-
'contentSwitcher',
35-
],
3630
}),
31+
computed: {
32+
pages:function () {
33+
returngetNames()
34+
},
35+
},
3736
}
3837
</script>
3938

‎src/utils/contentIndex.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
constcomponentList=[
2+
{
3+
'name':'Accordion',
4+
'title':'Accordion',
5+
'content':'Accordion Content',
6+
},
7+
{
8+
'name':'Breadcrumb',
9+
'title':'Breadcrumb',
10+
'content':'Breadcrumb Content',
11+
},
12+
{
13+
'name':'Button',
14+
'title':'Button',
15+
'content':'Button Content',
16+
},
17+
{
18+
'name':'Checkbox',
19+
'title':'Checkbox',
20+
'content':'Checkbox Content',
21+
},
22+
{
23+
'name':'CodeSnippet',
24+
'title':'CodeSnippet',
25+
'content':'CodeSnippet Content',
26+
},
27+
{
28+
'name':'ContentSwitcher',
29+
'title':'ContentSwitcher',
30+
'content':'ContentSwitcher Content',
31+
},
32+
]
33+
34+
exportfunctiongetNames(){
35+
returncomponentList.map(componentItem=>componentItem.name)
36+
}
37+
38+
exportfunctiongetList(){
39+
returncomponentList
40+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp