@blueking/app-select

蓝鲸业务选择器

使用

  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
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

类型说明

  interface AppItem {
    [key: string]: any
  }