GroupSelect 组选择器

说明

基于 el-button-group 封装，提供了一种简洁的方式来创建单选按钮组

用法示例

基础用法

最基本的用法，通过 v-model 绑定选中值，通过 options 配置选项。

基础用法

选中值: 1

<template>
  <div>
    <h3>基础用法</h3>
    <y-group-select
      v-model="selectedValue1"
      :options="basicOptions"
      @change="handleChange"
    />
    <p>选中值: {{ selectedValue1 }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { GroupSelectOption } from '@yun-elp/components'

// 基础选项
const basicOptions: GroupSelectOption[] = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
  { label: '选项四', value: '4', disabled: true },
  { label: '选项五', value: '5', loading: true },
]


// 响应式数据
const selectedValue1 = ref('1')

// 事件处理
const handleChange = ({ value, item, index, event }: { value: string | number, item: GroupSelectOption, index: number, event: MouseEvent }) => {
  console.log('选择变化:', { value, item, index, event })
}
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值	string | number	''
options	选项数组	GroupSelectOption[]	[]
item-class	按钮的自定义类名	string	''
item-styles	按钮的自定义样式对象	Record<string, any>	{}

GroupSelectOption Properties

属性名	说明	类型	默认值
label	选项的标签文本	string	—
value	选项的值	string | number	—
disabled	是否禁用该选项	boolean	false
icon	选项的图标	string	—
loading	是否显示加载状态	boolean	false

Events

事件名	说明	类型
change	选择变化时触发	function

Slots

插槽名	说明	参数
default	自定义选项内容	object
icon	自定义图标	—
loading	自定义加载状态	—