tool-search/README.md

Tool-Search一个自定义搜索引擎的搜索框组件

<h1 align="center">Tool-Search</h1>

<p align="center">🌱<b>Tool-Search</b>一个自定义搜索引擎的搜索框组件</p>

<p align="center">
	<a href="https://opensource.org/licenses/mit-license.php">
		<img alt="MIT Licence" src="https://badges.frapsoft.com/os/mit/mit.svg" />
	</a>
	<a href="https://www.jsdelivr.com/package/npm/tool-search)">
		<img alt="jsdelivr" src="https://data.jsdelivr.com/v1/package/npm/tool-search/badge" />
	</a>
<a href="https://badge.fury.io/gh/ToolSites%2Ftool-search"><img src="https://badge.fury.io/gh/ToolSites%2Ftool-search.svg" alt="GitHub version" height="18"></a>
<a href="https://badge.fury.io/js/tool-search"><img src="https://badge.fury.io/js/tool-search.svg" alt="npm version" height="18"></a>
</p>


## 预览

![1642577220971](README.assets/1642577220971.png)
## 安装
### 在Vue中使用
```bash
npm i tool-search
#引入
import ToolSearch from 'tool-search/lib/tool-search.common'
import 'tool-search/lib/tool-search.css'
Vue.use(ToolSearch)
#使用
<tool-search :groupData=group_data @submitEvent="submitEvent" :autoSubmit="true" :pageNew="true"/>

```
事件

|名称|描述|item|
|-------|-------|-------|
|submitEvent|获取用户搜索内容|{"name": "百度","color": "#2100E0","url": "https://www.baidu.com","keyword": "wd","description": "百度一下","content": "用户搜索" }|

配置

|名称|描述|默认|
|-------|-------|-------|
|groupData|自定义搜索引擎|[{"group":"常用","list":[{"name":"百度","color":"#2100E0","url":"https://www.baidu.com","keyword":"wd","description":"百度一下"}]}]|
|autoSubmit|是否自动提交|true|
|pageNew|搜索时，是否打开新页面|true|


### 在html中使用
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tool-search/dist/tool-search.min.js"></script>
<tool-search groupData=''></tool-search>
```


自定义搜索列表参考：
```js
const groupData = [
    {
      "group": "常用",      //分组名称
      "list": [
        {
          "name": "百度",
          "color": "#2100E0",    //字体颜色
          "url": "https://www.baidu.com",
          "keyword": "wd",
          "description": "百度一下"
        }
      ]
    }
  ]

```

## 开发
```
git clone https://github.com/ToolSites/tool-search.git

npm install

npm run serve

```

## 项目说明
有问题直接 issue ，可以一起讨论。最后，如果对你有帮助请 star。

>github地址: https://github.com/ToolSites/tool-search