@mywzzz/mineadmin-search-panel

Vue 3 + Element Plus search panel component extracted from MineAdmin scenarios.

Install

npm install @mywzzz/mineadmin-search-panel

Peer dependencies:

• vue
• element-plus
• @iconify/vue

Usage

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')

<script setup lang="ts">
import { ref } from 'vue'
import SearchPanel, { type LegacySearchPanelItem } from '@mywzzz/mineadmin-search-panel'
import '@mywzzz/mineadmin-search-panel/style.css'

const form = ref<Record<string, unknown>>({
  username: '',
  status: '',
})

const items: LegacySearchPanelItem[] = [
  {
    label: () => '用户名',
    prop: 'username',
    render: 'input',
    renderProps: {
      clearable: true,
      placeholder: '请输入用户名',
    },
  },
  {
    label: () => '状态',
    prop: 'status',
    render: 'select',
    renderProps: {
      clearable: true,
      options: [
        { label: '启用', value: '1' },
        { label: '禁用', value: '0' },
      ],
    },
  },
]
</script>

<template>
  <SearchPanel
    v-model="form"
    title="用户检索"
    subtitle="真实 npm 包使用示例"
    :items="items"
    :fold="true"
    @search="console.log"
    @reset="console.log"
  />
</template>

Supported item input

• Library items: input / select / date-picker / input-number
• Legacy MineAdmin-style items: label + prop + render + renderProps
• Custom component items: component must support v-model and pass width-related attrs or styles to the actual input control

Build

npm run build

The build outputs:

• dist/index.js
• dist/index.umd.cjs
• dist/index.d.ts
• dist/style.css