wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搜索框优化

Browse Source
This commit is contained in:
不做码农 2023-04-11 16:33:19 +08:00
parent 050c261544
commit 78fed5ce17
1 changed files with 33 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/HeaderSearch/index.vue
View File

@ -1,18 +1,29 @@
<template> <template>
<div :class="{ show: show }" class="header-search"> <div class="header-search">
<svg-icon class-name="search-icon" name="search" @click.stop="click" /> <svg-icon class-name="search-icon" name="search" @click.stop="click" />
<el-select <el-dialog title="搜索" v-model="open" append-to-body width="500" @close="close" draggable="">
ref="headerSearchSelectRef" <el-select
v-model="search" style="width: 95%"
:remote-method="querySearch" ref="headerSearchSelectRef"
filterable size="large"
default-first-option v-model="search"
remote :remote-method="querySearch"
placeholder="Search" filterable
class="header-search-select" default-first-option
@change="change"> remote
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" /> placeholder="搜索，支持标题、URL模糊查询"
</el-select> @change="change">
<template #prefix>
<el-icon color="#409EFC" class="no-inherit">
<Search />
</el-icon>
</template>
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')">
<span style="float: left">{{ option.item.title.join(' > ') }}</span>
<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{ option.item.path }}</span>
</el-option>
</el-select>
</el-dialog>
</div> </div>
</template> </template>
@ -26,21 +37,26 @@ const search = ref('')
const options = ref([]) const options = ref([])
const searchPool = ref([]) const searchPool = ref([])
const show = ref(false) const show = ref(false)
const open = ref(false)
const fuse = ref(undefined) const fuse = ref(undefined)
const headerSearchSelectRef = ref(null) const headerSearchSelectRef = ref(null)
const router = useRouter() const router = useRouter()
const routes = computed(() => usePermissionStore().routes) const routes = computed(() => usePermissionStore().routes)
function click() { function click() {
open.value = !open.value
show.value = !show.value show.value = !show.value
if (show.value) { if (open.value) {
headerSearchSelectRef.value && headerSearchSelectRef.value.focus() setTimeout(() => {
headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
}, 1)
} }
} }
function close() { function close() {
headerSearchSelectRef.value && headerSearchSelectRef.value.blur() headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
options.value = [] options.value = []
show.value = false show.value = false
open.value = false
} }
function change(val) { function change(val) {
const path = val.path const path = val.path
@ -56,6 +72,7 @@ function change(val) {
options.value = [] options.value = []
nextTick(() => { nextTick(() => {
show.value = false show.value = false
open.value = false
}) })
} }
function initFuse(list) { function initFuse(list) {
@ -144,40 +161,12 @@ watch(searchPool, (list) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.header-search { .header-search {
font-size: 0 !important; // font-size: 0 !important;
.search-icon { .search-icon {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
} }
.header-search-select {
font-size: 18px;
transition: width 0.2s;
width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
display: inline-block;
vertical-align: middle;
:deep(.el-input__inner) {
border-radius: 0;
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
border-bottom: 1px solid #d9d9d9;
vertical-align: middle;
}
}
&.show {
.header-search-select {
width: 210px;
margin-left: 10px;
}
}
} }
</style> </style>