@blueking/app-select/readme.md

基于蓝鲸 Magicbox 和 Vue 的前端业务组件

## 蓝鲸业务选择器

#### 使用

```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
<template>
  <AppSelect :data="data" @change="handleChange" />
</template>
<script setup lang="ts">
  import { shallowRef } from 'vue';

  const data = shallowRef<AppItem[]>([
    {
      id: 'xxxx',
      name: '业务 xxxx'
    },
    {
      id: 'yyyy',
      name: '业务 yyyy'
    },
    {
      id: 'zzzz',
      name: '业务 zzzz'
    }
  ])

  const handleChange = (payload: AppItem) => {
      console.log('change = ', payload)
  }
</script>
```

#### 组件 Props

<table>
  <thead>
    <tr>
      <th>属性名</th>
      <th>说明</th>
      <th>类型</th>
      <th>可选值</th>
      <th>默认值</th>
      <th>必填</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>业务列表数据</td>
      <td>AppItem []</td>
      <td>--</td>
      <td>--</td>
      <td>true</td>
    </tr>
    <tr>
      <td>value</td>
      <td>选中的业务</td>
      <td>AppItem</td>
      <td>--</td>
      <td>--</td>
      <td>false</td>
    </tr>
    <tr>
      <td>generateKey</td>
      <td>每项数据唯一 key</td>
      <td>Function</td>
      <td>--</td>
      <td>(data) => data.id</td>
      <td>false</td>
    </tr>
    <tr>
      <td>generateName</td>
      <td>每项数据展示文本</td>
      <td>Function</td>
      <td>--</td>
      <td>(data) => data.name</td>
      <td>false</td>
    </tr>
    <tr>
      <td>minWidth</td>
      <td>选择面板最小宽度</td>
      <td>Number</td>
      <td>--</td>
      <td>320</td>
      <td>false</td>
    </tr>
    <tr>
      <td>theme</td>
      <td>主题色</td>
      <td>String</td>
      <td>ligth | dark</td>
      <td>ligth</td>
      <td>false</td>
    </tr>
     <tr>
      <td>simple</td>
      <td>极简风格</td>
      <td>Boolean</td>
      <td>true | false</td>
      <td>false</td>
      <td>false</td>
    </tr>
     <tr>
      <td>placeholder</td>
      <td>placeholder</td>
      <td>String</td>
      <td>--</td>
      <td>请选择</td>
      <td>false</td>
    </tr>
     <tr>
      <td>searchPlaceholder</td>
      <td>下拉面板搜索框 placeholder</td>
      <td>String</td>
      <td>--</td>
      <td>请选择</td>
      <td>false</td>
    </tr>
    <tr>
      <td>searchEmptyText</td>
      <td>下拉面板搜索搜索数据为空</td>
      <td>String</td>
      <td>--</td>
      <td>暂无数据</td>
      <td>false</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>禁用</td>
      <td>Boolean</td>
      <td>true/false</td>
      <td>false</td>
      <td>false</td>
    </tr>
    <tr>
      <td>clearable</td>
      <td>是否可以清楚</td>
      <td>Boolean</td>
      <td>true/false</td>
      <td>false</td>
      <td>false</td>
    </tr>
    <tr>
      <td>type</td>
      <td>显示风格</td>
      <td>String</td>
      <td>simple/text</td>
      <td>undefined</td>
      <td>false</td>
    </tr>
     <tr>
      <td>popoverOptions</td>
      <td>下拉面板 popover 配置</td>
      <td>Object</td>
      <td>--</td>
      <td>undefined</td>
      <td>false</td>
    </tr>
  </tbody>
</table>

#### 组件 Event
<table style='width:100%'>
  <thead>
    <tr>
      <th>事件名</th>
      <th>说明</th>
      <th>参数类型</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>change</td>
      <td>选中业务</td>
      <td>AppItem</td>
    </tr>
  </tbody>
</table>

#### 组件 Slot
<table style='width:100%'>
  <thead>
    <tr>
      <th>名称</th>
      <th>说明</th>
      <th>参数类型</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>default</td>
      <td>自定义下拉选项</td>
      <td><code>AppItem</code></td>
    </tr>
     <tr>
      <td>value</td>
      <td>自定义选中结果展示</td>
      <td><code>AppItem</code></td>
    </tr>
    <tr>
      <td>empty</td>
      <td>下拉列表为空</td>
      <td>undefined</td>
    </tr>
    <tr>
      <td>append</td>
      <td>下拉列表底部功能扩展</td>
      <td>undefined</td>
    </tr>
  </tbody>
</table>

#### 类型说明

``` typescript
  interface AppItem {
    [key: string]: any
  }
```