[chrome]feat：搜索功能优化
This commit is contained in:
fanxb
parent
ef9e6c06dd
commit
aa679e48a9
@ -14,7 +14,7 @@ export default {
|
||||
|
||||
<style>
|
||||
.app {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
width: 600px;
|
||||
height: 580px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-tree :props="props" :load="loadNode" @node-click="nodeClick" lazy> </el-tree>
|
||||
<el-tree :props="props" :load="loadNode" accordion @node-click="nodeClick" lazy>
|
||||
<span class="treeItem" slot-scope="{ node }">
|
||||
<span>{{ node.label }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -57,7 +61,14 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.main {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.treeItem {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-popover placement="bottom-start" width="550" popper-class="popover" trigger="manual" :visible-arrow="false" v-model="isShow">
|
||||
<div>
|
||||
<div class="item" v-for="item in searchList" :key="item.bookmarkId">
|
||||
<a target="_blank" :href="item.url">{{ item.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
ref="searchInput"
|
||||
type="text"
|
||||
placeholder="搜索"
|
||||
v-model="searchContent"
|
||||
clearable
|
||||
:autofocus="true"
|
||||
slot="reference"
|
||||
@blur="clear"
|
||||
@keyup.enter.native="searchKey"
|
||||
@focus="focus"
|
||||
>
|
||||
<el-button slot="append" icon="el-icon-search" @click="searchKey"></el-button>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
<div class="searchResult"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
export default {
|
||||
name: 'searchBookmark',
|
||||
data() {
|
||||
return {
|
||||
searchContent: '',
|
||||
// 是否展示结果列表
|
||||
isShow: false,
|
||||
// 是否有焦点
|
||||
isFocus: false,
|
||||
searchList: [],
|
||||
timeOut: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
searchContent(newVal, oldVal) {
|
||||
if (newVal.trim().length === 0) {
|
||||
return;
|
||||
}
|
||||
if (newVal.trim() !== oldVal) {
|
||||
if (this.timeOut != null) {
|
||||
clearTimeout(this.timeOut);
|
||||
}
|
||||
this.searchList = [];
|
||||
this.timeOut = setTimeout(async () => {
|
||||
this.searchList = await axios.get(`bookmark/searchUserBookmark?content=${newVal}`);
|
||||
this.isShow = this.searchList.length > 0;
|
||||
this.timeOut = null;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs['searchInput'].focus();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
searchKey() {
|
||||
window.open('https://www.baidu.com/s?ie=UTF-8&wd=' + window.encodeURIComponent(this.searchContent));
|
||||
},
|
||||
focus() {
|
||||
this.isFocus = true;
|
||||
},
|
||||
clear() {
|
||||
this.isFocus = false;
|
||||
if (this.timeOut != null) {
|
||||
clearTimeout(this.timeOut);
|
||||
}
|
||||
this.searchContent = '';
|
||||
this.searchList = [];
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
width: 500px;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
@ -5,49 +5,26 @@
|
||||
<span>{{ personInfo.username }}</span>
|
||||
</div>
|
||||
<!-- 书签检索 -->
|
||||
<div class="search">
|
||||
<el-input placeholder="关键词检索" v-model="searchContent">
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
<div class="searchResult">
|
||||
<div class="item" v-for="item in searchList" :key="item.bookmarkId">
|
||||
<a target="_blank" :href="item.url">{{ item.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<search />
|
||||
<bookmark-tree />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import BookmarkTree from '../components/BookmarkTree';
|
||||
import Search from '../components/SearchBookmark';
|
||||
export default {
|
||||
components: {
|
||||
BookmarkTree,
|
||||
Search,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
personInfo: {},
|
||||
searchContent: '',
|
||||
searchList: [],
|
||||
timeOut: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
searchContent(newVal, oldVal) {
|
||||
if (newVal.trim() !== oldVal) {
|
||||
if (this.timeOut != null) {
|
||||
clearTimeout(this.timeOut);
|
||||
}
|
||||
this.searchList = [];
|
||||
this.timeOut = setTimeout(async () => {
|
||||
this.searchList = await axios.get(`bookmark/searchUserBookmark?content=${newVal}`);
|
||||
this.timeOut = null;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
window.token = localStorage.getItem('token');
|
||||
this.init();
|
||||
@ -69,10 +46,4 @@ export default {
|
||||
align-items: center;
|
||||
padding: 0 5% 0 5%;
|
||||
}
|
||||
.searchResult {
|
||||
}
|
||||
.item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
// const baseUri = 'https://bm.tapme.top';
|
||||
const baseUri = 'http://localhost:3000';
|
||||
// const baseUri = ;
|
||||
var baseUri;
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
baseUri = 'http://localhost:3000';
|
||||
} else {
|
||||
baseUri = 'https://bm.tapme.top';
|
||||
}
|
||||
|
||||
const config = {
|
||||
baseUrl: baseUri + '/bookmark/api',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user