ChangLu-UI

Selector 选择器

鱼与熊掌不可得兼，舍鱼而取熊掌者也。

基础用法&代码示例

单选 并且支持搜索

- 没有搜索到数据 -
使用option来传入选择列表
<template>
    <cl-selector placeholder="请选择" :data-option="selectorData" @change="setItem"> </cl-selector> 
</template>
<script setup lang="ts">
    const selectorData = [
        { 
            id: 'select1',
            value: 1,
            label: '选项一'
        },
        { 
            id: 'select2',
            value: 2,
            label: '选项二'
        },
        { 
            id: 'select3',
            value: 3,
            label: '选项三'
        },
    ]
    const setItem = (item: MENUITEM)=> {
      console.log(item, '选中的选项')
    }
</script>

Attributes

参数说明类型是否必要默认值
placeholder未选择时的占位文本Stringfalse请选择选项
dataOption选择列表[]MENUITEMtrue[ { id: 'menu1', value: 1, label: '选项一' } ]

类型说明: MENUITEM

declare type MENUITEM = {
    //菜单项的id
  id: string,
    //   菜单项的值
  value: number,
    //   菜单项显示的值
  label: string
}

Events

事件名称说明回调参数
change用户选中时触发目前选中的值