VueGlobalSearch自定义按钮
对于想自定义搜索按钮样式的场景，我们同样提供了 JavaScript API 支持。
VueGlobalSearch.open
open 方法可以直接打开搜索弹框，你可以随意定义自己的搜索按钮，在点击事件里调用 VueGlobalSearch.open 方法。
VueGlobalSearch.open 参数
| 参数名 | 说明 | 默认值 |
|---|---|---|
| navigator | 点击搜索结果项时使用的跳转方法，如：window.open、router.push 等 | window.location.href = |
| data | 所有检索数据，格式：[{ url: '点击搜索结果项的跳转地址，必填', title: '搜索结果项显示的标题，必填', navigator: '跳转使用的方法，可选' }] | [] |
示例
vue
<template>
<button @click="handleOpen">打开全局搜索</button>
</template>
<script setup>
import VueGlobalSearch from '../../src'
const handleOpen = () => {
VueGlobalSearch.open({
navigator: window.open,
data: [{
url: 'https://light-cone.cn',
title: '光锥'
}]
})
}
</script>
<style scoped>
button {
border: 1px solid #999;
height: 32px;
border-radius: 16px;
padding: 0 12px;
}
</style>
<template>
<button @click="handleOpen">打开全局搜索</button>
</template>
<script setup>
import VueGlobalSearch from '../../src'
const handleOpen = () => {
VueGlobalSearch.open({
navigator: window.open,
data: [{
url: 'https://light-cone.cn',
title: '光锥'
}]
})
}
</script>
<style scoped>
button {
border: 1px solid #999;
height: 32px;
border-radius: 16px;
padding: 0 12px;
}
</style>
结果展示