menu-search-modal
A popup modal component based on vue3 and antdv, that can search menu.
English | 中文
Examples
Table of contents
Installation
npm i -S menu-search-modal
# or
pnpm add -S menu-search-modal
Usage
import the component where you want to use it.
import MenuSearchModal from 'menu-search-modal'
import 'menu-search-modal/lib/MenuSearchModal/style.css'
if you are using typescript
, you might also need to import the type.
import type { MenuSearchModalOption } from 'menu-search-modal'
Props
Prop | Description | Type | Default |
---|---|---|---|
buttonType | Type of the button component, same as antdv's | primary | ghost | dashed | link | text | default | default |
buttonSize | Size of th button component, same as antdv's | large | middle | small | middle |
buttonShape | Shape of the button component, same as antdv's | default | circle | round | default |
buttonContent | The text inside button | string |
⌘ + K in macOS, and Ctrl + K in windows or linux |
modalVisible(v-model) | The visibility of modal | boolean | false |
autofocus | Whether auto focus on the input box while open the modal | boolean | true |
options | The data that you want to deal with(search) | MenuSearchModalOption | { label: string | number, value: string | number, disabled?: boolean, children?: MenuSearchModalOption[] } [] |
[] |
Events
Event | Description | Callback |
---|---|---|
select | Select the menu in result list | function({ label, value, disabled }) |