| | |
| | | <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"
|
| | |
| | | @input="querySearch"
|
| | | prefix-icon="Search"
|
| | | placeholder="菜单搜索,支持标题、URL模糊查询"
|
| | | clearable
|
| | | >
|
| | | </el-input>
|
| | |
|
| | |
| | | </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()
|
| | |
| | | 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 {
|