Commit c4bd6995 authored by 전성희's avatar 전성희

[ADD] 가이드 title 검색 기능 추가

parent f64cf0d1
......@@ -102,20 +102,35 @@
<v-spacer/>
<v-text-field
v-if="showSearch"
v-show="showSearch"
v-model="keyword"
:maxlength="50"
v-on:keyup.enter="search"
solo
dense
single-line
rounded
class="ma-2"
class="ma-2 search-input"
hide-details
label="검색"
style="border:1px solid #eee;max-width:240px;">
</v-text-field>
<v-icon @click="showSearch = !showSearch">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
/>
<v-icon @click="showSearch = !showSearch" class="header-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
<div v-show="showSearch" class="search-result">
<v-list v-if="searchedList.length > 0">
<v-list-item
v-for="(item, index) in searchedList"
:key="index"
@click="openGuide(item)"
class="pt-2"
dense
>
<span class="path">{{item.path.substring(0, item.path.length-1)}}</span>
<span v-html="paintColor(item.title)"></span>
</v-list-item>
</v-list>
<span v-else>Search Result</span>
</div>
<!-- <v-btn @click="$store.state.editMode = !$store.state.editMode" elevation="0">편집</v-btn> -->
<v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
......@@ -191,6 +206,7 @@ export default{
drawer:true,
guideTitle:'',
clipped: false,
rawIndexList:[],
guideIndex:[],
loadingPageList: false,
targetParentId: null,
......@@ -201,7 +217,14 @@ export default{
scrollPositionRate:0,
showSearch:false,
}),
computed: {
searchedList() {
if(this.rawIndexList.length === 0 || this.keyword === '')
return []
else
return this.rawIndexList.filter(e => e.title.indexOf(this.keyword) > -1)
},
},
methods:{
openIndex() {
let route = this.$router.resolve({path: '/'});
......@@ -247,10 +270,10 @@ export default{
await this.$axios.get('http://localhost:5000/test/index')
.then(res => {
const rawIndexList = res.data
this.rawIndexList = res.data
// 최상위 목차(depth==1) 추출(path에 슬래시 갯수가 1개)
rawIndexList.forEach(e => {
this.rawIndexList.forEach(e => {
if(e.path.split('/').length === 2)
this.guideIndex.push(e)
});
......@@ -259,7 +282,7 @@ export default{
parentEl.children = []
// depth==2 추출
rawIndexList.forEach(rawEl => {
this.rawIndexList.forEach(rawEl => {
if(rawEl.path !== parentEl.path && rawEl.path.includes(parentEl.path)){
parentEl.children.push(rawEl)
}
......@@ -438,12 +461,30 @@ export default{
isShowNav() {
return this.$store.state.guideNavigator
}
},
clickOutsideEvent(e){
const searchInput = document.querySelector('.search-input')
const searchResult = document.querySelector('.search-result')
const searchBtn = document.querySelector('.header-icon')
const isClickInside = [searchInput, searchResult, searchBtn].some(item =>
item.contains(e.target)
)
if(!isClickInside)
this.showSearch = false
},
paintColor(text){
const container = document.createElement('div')
const coloredText = document.createElement('span')
container.appendChild(coloredText)
coloredText.innerHTML = this.keyword
coloredText.style.color = '#1e88e5'
return text.replaceAll(this.keyword, container.innerHTML)
}
},
mounted(){
this.getGuideIndex()
window.addEventListener("scroll", this.scrollEvent);
},
......@@ -457,8 +498,65 @@ export default{
},
'$store.state.guideTreeFlag'() {
this.activeGuideTreeIndex()
},
showSearch(val){
if(val){
this.$nextTick(()=>{
document.querySelector('.search-input input').focus()
window.addEventListener('click', this.clickOutsideEvent);
})
} else {
window.removeEventListener('click', this.clickOutsideEvent);
}
}
},
}
</script>
<style lang="scss">
.search-input {
border:1px solid #eee;
border-radius: 28px 28px 0 0;
max-width:240px;
}
.search-result {
width: 240px;
height: 300px;
padding: 10px;
background-color: white;
z-index: 9;
position: absolute;
right: 48px;
top: 52px;
border: 1px solid rgb(238, 238, 238);
border-top: none;
border-radius: 0 0 28px 28px;
overflow: auto;
.v-list {
.path {
position: absolute;
top: 4px;
font-size: 0.8rem;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
}
> span {
display: inline-block;
text-align: center;
width: 100%;
line-height: 250px;
opacity: 0.75;
}
}
@media screen and (max-width: 1263px) {
.search-result {
right: 96px;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment