frost-craft/frost-navigation
1
0
Fork 0
Code Releases Activity

优化链接搜索框功能

Browse Source
This commit is contained in:
Frost-ZX
2021-02-07 00:39:03 +08:00
parent 730576dd1e
commit e2f999530e
6 changed files with 55 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>Frost 网址导航</title><link href="static/css/chunk-vendors.08db079c.css" rel="preload" as="style"><link href="static/css/mainPage.0ffdc46d.css" rel="preload" as="style"><link href="static/js/chunk-vendors.3f17c3d0.js" rel="preload" as="script"><link href="static/js/mainPage.9e0582fd.js" rel="preload" as="script"><link href="static/css/chunk-vendors.08db079c.css" rel="stylesheet"><link href="static/css/mainPage.0ffdc46d.css" rel="stylesheet"></head><body><noscript><strong>浏览器未启用或不支持 JavaScript。</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.3f17c3d0.js"></script><script src="static/js/mainPage.9e0582fd.js"></script></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>Frost 网址导航</title><link href="static/css/chunk-vendors.08db079c.css" rel="preload" as="style"><link href="static/css/mainPage.1b58663e.css" rel="preload" as="style"><link href="static/js/chunk-vendors.3f17c3d0.js" rel="preload" as="script"><link href="static/js/mainPage.b24be143.js" rel="preload" as="script"><link href="static/css/chunk-vendors.08db079c.css" rel="stylesheet"><link href="static/css/mainPage.1b58663e.css" rel="stylesheet"></head><body><noscript><strong>浏览器未启用或不支持 JavaScript。</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.3f17c3d0.js"></script><script src="static/js/mainPage.b24be143.js"></script></body></html>

1
docs/static/css/mainPage.0ffdc46d.css vendored
View File

@@ -1 +0,0 @@
::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{border-radius:1rem;background-color:#f5f5f5}::-webkit-scrollbar-thumb:hover{background-color:#409eff}html{font-size:16px}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shadow-1{box-shadow:0 0 .5rem rgba(0,0,0,.1)}.loading-link{background-color:hsla(0,0%,100%,.5)!important;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}.loading-link .el-icon-loading{font-size:2rem!important}.loading-link .el-loading-text{font-size:1.5rem!important}.main-header{display:flex;align-items:center;z-index:200;height:4rem!important;background-color:#fff}.main-header .menu{height:2.5rem;border:none!important}.main-header .menu>li{height:100%;line-height:2.5rem}.main-header .menu>li.is-active{color:#409eff!important}.main-header .menu .title{font-size:1.2rem;color:#409eff;opacity:1;cursor:default}.main-container{height:calc(100vh - 4rem)}[data-v-d436b1cc]::-webkit-scrollbar{width:.5rem;height:.5rem}[data-v-d436b1cc]::-webkit-scrollbar-track{background-color:transparent}[data-v-d436b1cc]::-webkit-scrollbar-thumb{border-radius:1rem;background-color:#f5f5f5}[data-v-d436b1cc]::-webkit-scrollbar-thumb:hover{background-color:#409eff}html[data-v-d436b1cc]{font-size:16px}body[data-v-d436b1cc]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shadow-1[data-v-d436b1cc]{box-shadow:0 0 .5rem rgba(0,0,0,.1)}.loading-link[data-v-d436b1cc]{background-color:hsla(0,0%,100%,.5)!important;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}.loading-link .el-icon-loading[data-v-d436b1cc]{font-size:2rem!important}.loading-link .el-loading-text[data-v-d436b1cc]{font-size:1.5rem!important}.home-aside[data-v-d436b1cc]{width:18rem!important;overflow-x:hidden}.home-aside .side-nav[data-v-d436b1cc]{min-height:100%}.home-content[data-v-d436b1cc]{position:relative}.home-content .link-search[data-v-d436b1cc]{position:sticky;z-index:100;top:0;margin-bottom:1rem}.home-content .link-tree[data-v-d436b1cc]{font-size:14px}.home-content .link-tree[data-v-d436b1cc] .el-tree-node__content{height:3.6em}.home-content .link-tree .link-item>span[data-v-d436b1cc]{display:block}.home-content .link-tree .link-item .title[data-v-d436b1cc]{font-weight:700}.home-content .link-tree .link-item .link[data-v-d436b1cc]{margin-top:.2rem;opacity:.5}

1
docs/static/css/mainPage.1b58663e.css vendored Normal file
View File

@@ -0,0 +1 @@
::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{border-radius:1rem;background-color:#f5f5f5}::-webkit-scrollbar-thumb:hover{background-color:#409eff}html{font-size:16px}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shadow-1{box-shadow:0 0 .5rem rgba(0,0,0,.1)}.loading-link{background-color:hsla(0,0%,100%,.5)!important;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}.loading-link .el-icon-loading{font-size:2rem!important}.loading-link .el-loading-text{font-size:1.5rem!important}.main-header{display:flex;align-items:center;z-index:200;height:4rem!important;background-color:#fff}.main-header .menu{height:2.5rem;border:none!important}.main-header .menu>li{height:100%;line-height:2.5rem}.main-header .menu>li.is-active{color:#409eff!important}.main-header .menu .title{font-size:1.2rem;color:#409eff;opacity:1;cursor:default}.main-container{height:calc(100vh - 4rem)}[data-v-3851164a]::-webkit-scrollbar{width:.5rem;height:.5rem}[data-v-3851164a]::-webkit-scrollbar-track{background-color:transparent}[data-v-3851164a]::-webkit-scrollbar-thumb{border-radius:1rem;background-color:#f5f5f5}[data-v-3851164a]::-webkit-scrollbar-thumb:hover{background-color:#409eff}html[data-v-3851164a]{font-size:16px}body[data-v-3851164a]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shadow-1[data-v-3851164a]{box-shadow:0 0 .5rem rgba(0,0,0,.1)}.loading-link[data-v-3851164a]{background-color:hsla(0,0%,100%,.5)!important;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}.loading-link .el-icon-loading[data-v-3851164a]{font-size:2rem!important}.loading-link .el-loading-text[data-v-3851164a]{font-size:1.5rem!important}.home-aside[data-v-3851164a]{width:18rem!important;overflow-x:hidden}.home-aside .side-nav[data-v-3851164a]{min-height:100%}.home-content[data-v-3851164a]{position:relative}.home-content .link-search[data-v-3851164a]{position:sticky;z-index:100;top:0;margin-bottom:1rem}.home-content .link-search[data-v-3851164a] .el-input-group__prepend{background-color:#fff}.home-content .link-search[data-v-3851164a] .el-input-group__prepend .el-select .el-input{width:4.5rem}.home-content .link-search[data-v-3851164a] .el-input-group__prepend .el-select .el-input input{padding:0 .75rem}.home-content .link-tree[data-v-3851164a]{font-size:14px}.home-content .link-tree[data-v-3851164a] .el-tree-node__content{height:3.6em}.home-content .link-tree .link-item>span[data-v-3851164a]{display:block}.home-content .link-tree .link-item .title[data-v-3851164a]{font-weight:700}.home-content .link-tree .link-item .link[data-v-3851164a]{margin-top:.2rem;opacity:.5}

1
docs/static/js/mainPage.9e0582fd.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/mainPage.b24be143.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

60
src/views/Home.vue
View File

@@ -24,7 +24,15 @@
<el-main class="home-content">
<!-- 链接搜索框 -->
<el-input v-model="linkSearchText" class="link-search" placeholder="输入关键词以搜索链接"></el-input>
<el-input v-model="linkSearch.keyword" class="link-search" placeholder="输入关键词以搜索链接"
prefix-icon="el-icon-search" clearable
>
<el-select slot="prepend" v-model="linkSearch.type" placeholder="类型">
<el-option label="全部" value="all"></el-option>
<el-option label="标题" value="title"></el-option>
<el-option label="链接" value="link"></el-option>
</el-select>
</el-input>
<!-- 链接列表树 -->
<el-tree ref="linkTree" class="link-tree" :data="currentLinks" :props="{ label: 'title', children: 'sub' }"
@@ -50,20 +58,29 @@ export default {
navLinks: this.$root.navLinks,
// 当前显示的链接
currentLinks: [],
// 搜索关键词
linkSearchText: '',
linkSearchDebounce: null
// 搜索链接
linkSearch: {
debounce: null,
keyword: '',
type: 'all'
}
};
},
watch: {
'linkSearchText': {
'linkSearch.keyword': {
handler(value) {
clearTimeout(this.linkSearchDebounce);
clearTimeout(this.linkSearch.debounce);
this.linkSearchDebounce = setTimeout(() => {
this.linkSearch.debounce = setTimeout(() => {
this.$refs.linkTree.filter(value);
}, 500);
}
},
'linkSearch.type': {
handler() {
// 更改搜索类型时自动重新搜索
this.$refs.linkTree.filter(this.linkSearch.keyword);
}
}
},
methods: {
@@ -95,12 +112,27 @@ export default {
*/
searchLink(value, data) {
// 关键词为空，显示全部
if (value == '') {
return true
}
// 过滤后
var result = (data.title.indexOf(value) !== -1) || (data.link && (data.link.indexOf(value) !== -1));
var searchType = this.linkSearch.type;
var result = false;
if (searchType == 'all') {
// 全部
result = (data.title.toLowerCase().indexOf(value) !== -1) || (data.link && (data.link.indexOf(value) !== -1));
} else if (searchType == 'title') {
// 标题
result = (data.title.toLowerCase().indexOf(value) !== -1);
} else if (searchType == 'link') {
// 链接
result = (data.link && (data.link.indexOf(value) !== -1));
}
return result;
}
},
@@ -132,6 +164,18 @@ export default {
z-index: 100;
top: 0;
margin-bottom: 1rem;
/deep/ .el-input-group__prepend {
background-color: #FFF;
.el-select .el-input {
width: 4.5rem;
input {
padding: 0 0.75rem;
}
}
}
}
.link-tree {