快速开始

本章节将介绍如何在项目中使用 VueGlobalSearch。

用法

全局注册


// main.ts
import { createApp } from 'vue'
import VueGlobalSearch from 'vue-global-search'
import 'vue-global-search/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(VueGlobalSearch)
app.mount('#app')


// main.ts
import { createApp } from 'vue'
import VueGlobalSearch from 'vue-global-search'
import 'vue-global-search/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(VueGlobalSearch)
app.mount('#app')

你也可以这样全局注册


// main.ts
import { createApp } from 'vue'
import { VueGlobalSearch } from 'vue-global-search'
import 'vue-global-search/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.component('VueGlobalSearch', VueGlobalSearch)
app.mount('#app')


// main.ts
import { createApp } from 'vue'
import { VueGlobalSearch } from 'vue-global-search'
import 'vue-global-search/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.component('VueGlobalSearch', VueGlobalSearch)
app.mount('#app')

全局注册后，你可以在项目中任意位置使用 VueGlobalSearch 组件，具体用法参考下文。

组件内使用

vue


<template>
    <VueGlobalSearch :navigator="window.open" :data="[{
        title: '光锥',
        url: 'https://light-cone.cn'
    }]" />
</template>

<script setup>
    import { VueGlobalSearch } from 'vue-global-search'
    import 'vue-global-search/lib/style.css'
</script>


<template>
    <VueGlobalSearch :navigator="window.open" :data="[{
        title: '光锥',
        url: 'https://light-cone.cn'
    }]" />
</template>

<script setup>
    import { VueGlobalSearch } from 'vue-global-search'
    import 'vue-global-search/lib/style.css'
</script>

至此，您已经学会了如何使用 VueGlobalSearch，如果您不希望使用默认的搜索按钮，可以继续阅读下一章自定义按钮

快速开始 #

用法 #

全局注册 #

组件内使用 #

快速开始

用法

全局注册

组件内使用