蓝鲸业务选择器
使用
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);
<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
属性名 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
---|---|---|---|---|---|
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 |
popoverOptions | 下拉面板 popover 配置 | Object | -- | undefined | false |
组件 Event
事件名 | 说明 | 参数类型 |
---|---|---|
change | 选中业务 | AppItem |
组件 Slot
名称 | 说明 | 参数类型 |
---|---|---|
default | 自定义下拉选项 | AppItem |
value | 自定义选中结果展示 | AppItem |
empty | 下拉列表为空 | undefined |
append | 下拉列表底部功能扩展 | undefined |
类型说明
interface AppItem {
[key: string]: any
}