https://github.com/lirongtong/miitvip-search

:heart_eyes: 基于 Vue3.x + Vite2.x 开发的搜索组件，默认根据本地数据进行数据筛选，支持远程搜索 :sparkling_heart: 自定义结果列表中每一项的点击事件，自主配置主题色，自主定制联想列表的样式，支持分页配置等 :collision:
https://github.com/lirongtong/miitvip-search

component makeit makeit-admin-pro makeit-search makeit-search-component miitvip search vite vue3

Last synced: about 2 hours ago
JSON representation

:heart_eyes: 基于 Vue3.x + Vite2.x 开发的搜索组件，默认根据本地数据进行数据筛选，支持远程搜索 :sparkling_heart: 自定义结果列表中每一项的点击事件，自主配置主题色，自主定制联想列表的样式，支持分页配置等 :collision:

• Host: GitHub
• URL: https://github.com/lirongtong/miitvip-search
• Owner: lirongtong
• License: mit
• Created: 2021-01-15T04:30:29.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-09T02:24:28.000Z (almost 2 years ago)
• Last Synced: 2024-11-08T01:44:01.537Z (9 days ago)
• Topics: component, makeit, makeit-admin-pro, makeit-search, makeit-search-component, miitvip, search, vite, vue3
• Language: TypeScript
• Homepage:
• Size: 146 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

        

    





    

        Makeit Search

    





基于 Vue3.x + Vite4.x 开发的搜索组件

[![npm package](https://img.shields.io/npm/v/makeit-search.svg?style=flat-square)](https://www.npmjs.org/package/makeit-search)

[![npm_downloads](http://img.shields.io/npm/dm/makeit-search.svg?style=flat-square)](http://www.npmtrends.com/makeit-search)

![MIT](https://img.shields.io/badge/license-MIT-ff69b4.svg)

![webpack](https://img.shields.io/badge/webpack-5.14.0-orange.svg)

![vue](https://img.shields.io/badge/vue-3.2.47-green.svg)

![vite](https://img.shields.io/badge/vite-4.1.1-yellow.svg)

![axios](https://img.shields.io/badge/axios-1.3.2-red.svg)



## 关于

> Makeit Search 搜索组件，基于 Vue3.x + Vite4.x 开发，默认根据本地数据进行数据筛选，支持远程搜索，同时也支持搜索结果分页配置，自定义结果列表中每一项的点击事件等。

:white_check_mark: 默认根据本地数据进行过滤筛选

:white_check_mark: 支持配置远程接口获取待筛选数据

:white_check_mark: 支持远程搜索延迟

:white_check_mark: 支持自定义搜索框的外观（宽高、主题色、文本颜色等 ···）

:white_check_mark: 支持列表与结果的分页显示

:white_check_mark: 支持14种搜索框显示与隐藏的动画效果配置

:white_check_mark: 支持自定义点击选项的回调事件

:white_check_mark: 支持自定义搜索列表模板

## 安装

```bash

npm i makeit-search

```

## 使用

```ts

import { createApp } from 'vue'

import MakeitSearch from 'makeit-search'

import 'makeit-search/dist/search.min.css'

import App from './app.vue'

const app = createApp(App)

app.use(MakeitSearch)

app.mount('#app')

```

## 示例

```vue

    

    

    

    

        

            


                

            

            


                


                    

                

                


                    

                

            

        

    


    

    

    const searchData = [{

        title: '页面布局',

        content: '基于 Layout 组件的二次定制',

        avatar: 'https://file.makeit.vip/MIITVIP/M00/00/00/K4vDRGPcbmmAG8_sAAAtlj6Tt_s562.png',

        link: '/layout',

        icon: LayoutOutlined

    }, {

        title: '登录页面',

        content: '快速构建精美「登录页面」',

        link: '/login',

        icon: LoginOutlined

    }, {

        title: '注册页面',

        content: '快速构建精美「注册页面」',

        link: '/register',

        icon: ScheduleOutlined

    }]

```

## 更多

> 更多定制化内容及使用请查看在线示例：[https://admin.makeit.vip/components/search](https://admin.makeit.vip/components/search)