yyb
21 小时以前 22002c2b5bf09bb769a51448537fa6a572a3ea88
src/components/HeaderSearch/index.vue
@@ -1,13 +1,13 @@
<template>
  <div class="header-search">
    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
    <el-dialog
      v-model="show"
      width="600"
      @close="close"
      :show-close="false"
      append-to-body
    >
    <el-dialog
      v-model="show"
      width="600"
      @close="close"
      :show-close="true"
      append-to-body
    >
      <el-input
        v-model="search"
        ref="headerSearchSelectRef"
@@ -15,6 +15,7 @@
        @input="querySearch"
        prefix-icon="Search"
        placeholder="菜单搜索,支持标题、URL模糊查询"
        clearable
      >
      </el-input>
@@ -39,28 +40,51 @@
  </div>
</template>
<script setup>
import Fuse from 'fuse.js'
import { getNormalPath } from '@/utils/ruoyi'
import { isHttp } from '@/utils/validate'
import usePermissionStore from '@/store/modules/permission'
const search = ref('')
const options = ref([])
const searchPool = ref([])
const show = ref(false)
<script setup>
import Fuse from 'fuse.js'
import { getNormalPath } from '@/utils/ruoyi'
import { isHttp } from '@/utils/validate'
import usePermissionStore from '@/store/modules/permission'
const props = defineProps({
  keyword: {
    type: String,
    default: ''
  }
})
const search = ref('')
const options = ref([])
const searchPool = ref([])
const show = ref(false)
const fuse = ref(undefined)
const headerSearchSelectRef = ref(null)
const router = useRouter()
const routes = computed(() => usePermissionStore().defaultRoutes)
function click() {
  show.value = !show.value
  if (show.value) {
    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
    options.value = searchPool.value
  }
}
function click() {
  show.value = !show.value
  if (show.value) {
    syncSearchFromKeyword()
    nextTick(() => {
      headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
    })
  }
}
function syncSearchFromKeyword() {
  search.value = props.keyword?.trim?.() ?? ''
  querySearch(search.value)
}
function open(keyword = props.keyword) {
  show.value = true
  search.value = keyword?.trim?.() ?? ''
  querySearch(search.value)
  nextTick(() => {
    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
  })
}
function close() {
  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
@@ -159,10 +183,14 @@
  searchPool.value = generateRoutes(routes.value)
})
watch(searchPool, (list) => {
  initFuse(list)
})
</script>
watch(searchPool, (list) => {
  initFuse(list)
})
defineExpose({
  open
})
</script>
<style lang='scss' scoped>
.header-search {