makeit-search
Makeit Search
关于
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: 支持自定义搜索列表模板
安装
npm i makeit-search
使用
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')
示例
<template>
<!-- 基础效果 -->
<mi-search :data="searchData" search-key="title" />
<!-- 自定义模板 -->
<mi-search :data="searchData"
search-key="title"
border-color="#2F9688"
search-key-color="#2F9688"
:radius="42"
:pagination="true"
:page-size="3">
<template v-slot:itemTemplate>
<div class="avatar">
<mi-search-key type="image" tag="img" name="avatar" />
</div>
<div class="info">
<div class="title">
<mi-search-key name="title" />
</div>
<div class="content">
<mi-search-key name="content" />
</div>
</div>
</template>
</mi-search>
<!-- 支持远程搜索 / 搜索延迟 -->
<mi-search search-key="title"
border-color="#3399ff"
search-key-color="#3399ff"
search-action="v1/captcha/init"
:search-delay=".3" />
</template>
<script steup>
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
}]
</script>
更多
更多定制化内容及使用请查看在线示例:https://admin.makeit.vip/components/search
Dependencies
@babel/core: ^7.18.6@babel/eslint-parser: ^7.17.0@babel/plugin-proposal-class-properties: ^7.18.6@babel/plugin-proposal-export-default-from: ^7.18.6@babel/plugin-proposal-export-namespace-from: ^7.18.6@babel/plugin-proposal-object-rest-spread: ^7.18.6@babel/plugin-proposal-optional-chaining: ^7.18.6@babel/plugin-syntax-dynamic-import: ^7.8.3@babel/plugin-transform-object-assign: ^7.18.6@babel/plugin-transform-runtime: ^7.18.6@babel/plugin-transform-typescript: ^7.18.8@babel/preset-env: ^7.18.6@babel/preset-typescript: ^7.18.6@intlify/unplugin-vue-i18n: ^0.8.1@types/node: ^18.13.0@typescript-eslint/eslint-plugin: ^5.27.0@typescript-eslint/parser: ^5.27.0@vitejs/plugin-vue: ^4.0.0@vitejs/plugin-vue-jsx: ^1.3.8@vue/babel-plugin-jsx: ^1.1.1@vue/compiler-sfc: ^3.2.47@vue/eslint-config-prettier: ^6.0.0@vue/eslint-config-typescript: ^10.0.0autoprefixer: ^10.4.7babel-loader: ^8.2.5case-sensitive-paths-webpack-plugin: ^2.4.0clean-webpack-plugin: ^4.0.0compression-webpack-plugin: ^10.0.0css-loader: ^6.7.1css-minimizer-webpack-plugin: ^4.0.0eslint: ^8.11.0eslint-config-prettier: ^8.5.0eslint-plugin-import: ^2.26.0eslint-plugin-prettier: ^3.4.1eslint-plugin-vue: ^8.5.0gulp: ^4.0.2gulp-autoprefixer: ^8.0.0gulp-babel: ^8.0.0gulp-clean-css: ^4.3.0gulp-concat: ^2.6.1gulp-less: ^5.0.0gulp-sourcemaps: ^3.0.0gulp-typescript: ^6.0.0-alpha.1html-loader: ^4.1.0less: ^4.1.2less-loader: ^10.2.0less-plugin-npm-import: ^2.1.0merge2: ^1.4.1mini-css-extract-plugin: ^2.6.1postcss: ^8.4.14postcss-loader: ^7.0.1prettier: ^2.6.2rimraf: ^3.0.2style-loader: ^3.3.1terser-webpack-plugin: ^5.3.3through2: ^4.0.2ts-loader: ^9.3.1typescript: ^4.7.2unplugin-vue-components: ^0.19.6url-loader: ^4.1.1vite: ^4.1.1vite-plugin-eslint: ^1.8.1vue-eslint-parser: ^8.3.0vue-loader: ^17.0.0vue-style-loader: ^4.1.3vue-template-compiler: ^2.6.14webpack: ^5.70.0webpack-cli: ^4.9.2webpack-merge: ^5.8.0