You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.9 KiB
77 lines
1.9 KiB
<script> |
|
var app = new Vue({ |
|
el: '#app', |
|
data: { |
|
fuse: null, |
|
search: "", |
|
result: [], |
|
index: [], |
|
selected: 0 |
|
}, |
|
mounted() { |
|
let self = this |
|
|
|
// Global listener for keypress events, lets focus that search |
|
window.addEventListener("keypress", function(e) { |
|
self.$refs.searchInput.focus() |
|
}) |
|
|
|
let options = { |
|
shouldSort: true, |
|
threshold: 0.6, |
|
location: 0, |
|
distance: 100, |
|
maxPatternLength: 32, |
|
minMatchCharLength: 1, |
|
keys: [ |
|
"title", |
|
"author", |
|
"date", |
|
"content" |
|
] |
|
} |
|
axios.get('/index.json') |
|
.then(function (response) { |
|
self.index = response.data |
|
self.fuse = new Fuse(response.data, options) |
|
}) |
|
.catch(function (error) { |
|
}) |
|
}, |
|
watch: { |
|
result(nval, oval) { |
|
nval.length > 0 ? this.pointer(0) : this.pointer(-1) |
|
}, |
|
search(nval, oval) { |
|
this.result = this.fuse.search(nval) |
|
} |
|
}, |
|
methods: { |
|
navigate(val) { |
|
switch (val) { |
|
case 1: if (this.selected < this.result.length - 1) { this.selected++ }; break; |
|
case -1: if (this.selected > 0 ) { this.selected-- }; break; |
|
default: window.location.href = val; break; |
|
} |
|
this.pointer(this.selected) |
|
}, |
|
pointer(selected) { |
|
let self = this |
|
|
|
if (selected >= 0) { |
|
Vue.nextTick().then(function() { |
|
let height = self.$refs.resultItem[selected].clientHeight |
|
let top = self.$refs.resultItem[selected].getBoundingClientRect().top |
|
let left = self.$refs.resultItem[selected].getBoundingClientRect().left |
|
|
|
self.$refs.resultPoint.style.top = (top+height/2)+'px' |
|
self.$refs.resultPoint.style.left = (left-20)+'px' |
|
}) |
|
} else { |
|
this.$refs.resultPoint.style.left = '-50px' |
|
return |
|
} |
|
} |
|
} |
|
}) |
|
</script> |