预览

安装

在Vue中使用

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中使用

<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>

自定义搜索列表参考：

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