基于蓝鲸 Magicbox 和 Vue 的前端业务组件
npm install @blueking/app-select#### 使用
``javascript
import { createApp } from 'vue';
import AppSelect from '@blueking/app-select';
import App from './APP.vue'
import '@blueking/app-select/dist/style.css'
const app = createApp(App);
app.component('AppSelect', AppSelect);
`
` vue`
#### 组件 Props
| 属性名 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
|---|---|---|---|---|---|
| data | 业务列表数据 | AppItem [] | -- | -- | true |
| value | 选中的业务 | AppItem | -- | -- | false |
| generateKey | 每项数据唯一 key | Function | -- | (data) => data.id | false |
| generateName | 每项数据展示文本 | Function | -- | (data) => data.name | false |
| minWidth | 选择面板最小宽度 | Number | -- | 320 | false |
| theme | 主题色 | String | ligth | dark | ligth | false |
| simple | 极简风格 | Boolean | true | false | false | false |
| placeholder | placeholder | String | -- | 请选择 | false |
| searchPlaceholder | 下拉面板搜索框 placeholder | String | -- | 请选择 | false |
| searchEmptyText | 下拉面板搜索搜索数据为空 | String | -- | 暂无数据 | false |
| disabled | 禁用 | Boolean | true/false | false | false |
| clearable | 是否可以清楚 | Boolean | true/false | false | false |
| type | 显示风格 | String | simple/text | undefined | false |
| searchExtensionMethod | 所有规则自定义 | Function | undefined | undefined | false |
| customListFilterRenderMethod | 自定列表列表搜索渲染 | Function | undefined | undefined | false |
| popoverOptions | 下拉面板 popover 配置 | Object | -- | undefined | false |
#### 组件 Event
| 事件名 | 说明 | 参数类型 |
|---|---|---|
| change | 选中业务 | AppItem |
#### 组件 Slot
| 名称 | 说明 | 参数类型 |
|---|---|---|
| default | 自定义下拉选项 | AppItem |
| value | 自定义选中结果展示 | AppItem |
| empty | 下拉列表为空 | undefined |
| append | 下拉列表底部功能扩展 | undefined |
#### 类型说明
` typescript``
interface AppItem {
[key: string]: any
}