iDesign

Select 选择器

下拉选择器。

基本用法

可通过 defaultValue 设置默认值，通过 value 属性设置受控值，通过 @change 设置值改变时触发的操作：

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-select>
    <i-select-item value="item1">选项一</i-select-item>
    <i-select-item value="item2">选项二</i-select-item>
    <i-select-item value="item3">选项三</i-select-item>
  </i-select>
  <h4>有默认值（非受控）</h4>
  <i-select :defaultValue="currentValue">
    <i-select-item value="item1">选项一</i-select-item>
    <i-select-item value="item2">选项二</i-select-item>
    <i-select-item value="item3">选项三</i-select-item>
  </i-select>
  <h4>有固定值（受控）</h4>
  <i-select :modelValue="currentValue">
    <i-select-item value="item1">选项一</i-select-item>
    <i-select-item value="item2">选项二</i-select-item>
    <i-select-item value="item3">选项三</i-select-item>
  </i-select>
  <h4>一般用法</h4>
  <i-select :modelValue="currentValue" @change="handleChange">
    <i-select-item value="item1">选项一</i-select-item>
    <i-select-item value="item2">选项二</i-select-item>
    <i-select-item value="item3">选项三</i-select-item>
  </i-select>
  <h4>v-model 用法</h4>
  <i-select v-model="currentValue">
    <i-select-item value="item1">选项一</i-select-item>
    <i-select-item value="item2">选项二</i-select-item>
    <i-select-item value="item3">选项三</i-select-item>
  </i-select>
</template>

<script setup>
import { ref } from 'vue'

const currentValue = ref('item1')

const handleChange = (val) => {
  currentValue.value = val
}
</script>
显示代码

两种用法

除了通过包裹 <i-select-item> 的方式传入数据，也可以通过传入 options 属性来实现，可将 clearable 设为 false 关闭一键清空功能。

<template>
  <div className="idesign-demo-block-row">
    <i-select v-model="currentValue">
      <i-select-item value="item1">选项一</i-select-item>
      <i-select-item value="item2">选项二</i-select-item>
      <i-select-item value="item3">选项三</i-select-item>
    </i-select>
    <i-select
      v-model="currentValue"
      :options="options"
      :clearable="false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '选项一',
    value: 'item1'
  },
  {
    content: '选项二',
    value: 'item2'
  },
  {
    content: '选项三',
    value: 'item3'
  }
]

const currentValue = ref('item1')
</script>
显示代码

不同尺寸

可通过 size 属性来指定不同尺寸的选择器，默认为 medium。

<template>
  <div className="idesign-demo-block-row">
    <i-select
      :value="currentValue"
      :options="options"
      size="small"
      @change="handleChange"
    />
    <i-select
      :value="currentValue"
      :options="options"
      size="medium"
      @change="handleChange"
    />
    <i-select
      :value="currentValue"
      :options="options"
      size="large"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '选项一',
    value: 'item1'
  },
  {
    content: '选项二',
    value: 'item2'
  },
  {
    content: '选项三',
    value: 'item3'
  }
]

const currentValue = ref('item1')

const handleChange = (val) => {
  currentValue.value = val
}
</script>
显示代码

全局禁用

可通过 disabled 属性来禁用选择器。

<template>
  <i-select disabled />
</template>
显示代码

单项禁用

可在 <i-select-item> 使用 disabled 属性来控制单项禁用，也可在 <i-select> 的 options 属性中设置 disabled 控制单项禁用。

<template>
  <div className="idesign-demo-block-row">
    <i-select v-model="currentValue">
      <i-select-item value="item1" disabled>选项一</i-select-item>
      <i-select-item value="item2">选项二</i-select-item>
      <i-select-item value="item3">选项三</i-select-item>
    </i-select>
    <i-select
      v-model="currentValue"
      :options="options"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '选项一',
    value: 'item1'
  },
  {
    content: '选项二',
    value: 'item2',
    disabled: true
  },
  {
    content: '选项三',
    value: 'item3'
  }
]

const currentValue = ref('item1')
</script>
显示代码

单项带分割线

可在 <i-select-item> 使用 divider 属性来控制单项禁用，也可在 <i-select> 的 divider 属性中设置 disabled 控制单项禁用。

<template>
  <div className="idesign-demo-block-row">
    <i-select v-model="currentValue">
      <i-select-item value="item1">选项一</i-select-item>
      <i-select-item value="item2" divider>选项二</i-select-item>
      <i-select-item value="item3">选项三</i-select-item>
    </i-select>
    <i-select
      v-model="currentValue"
      :options="options"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '选项一',
    value: 'item1'
  },
  {
    content: '选项二',
    value: 'item2',
    divider: true
  },
  {
    content: '选项三',
    value: 'item3'
  }
]

const currentValue = ref('item1')
</script>
显示代码

单项带分组标题

可在 <i-select-item> 使用 title 属性来控制单项禁用，也可在 <i-select> 的 title 属性中设置 disabled 控制单项禁用。

<template>
  <div className="idesign-demo-block-row">
    <i-select v-model="currentValue">
      <i-select-item value="item1" title="分组 1">选项一</i-select-item>
      <i-select-item value="item2" divider>选项二</i-select-item>
      <i-select-item value="item3" title="分组 2">选项三</i-select-item>
    </i-select>
    <i-select
      v-model="currentValue"
      :options="options"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '选项一',
    value: 'item1',
    title: '分组 1'
  },
  {
    content: '选项二',
    value: 'item2',
    divider: true
  },
  {
    content: '选项三',
    value: 'item3',
    title: '分组 2'
  }
]

const currentValue = ref('item1')
</script>
显示代码

带前后缀图标

可通过 <i-select> 的 prefixIcon 和 suffixIcon 属性设置选择框前后缀图标。

<template>
  <div className="idesign-demo-block-row">
    <i-select
      :options="options"
      prefixIcon="Search"
    />
    <i-select
      :options="options"
      suffixIcon="Search"
    />
  </div>
</template>

<script setup>
const options = [
  {
    content: '选项一',
    value: 'item1'
  },
  {
    content: '选项二',
    value: 'item2'
  },
  {
    content: '选项三',
    value: 'item3'
  }
]
</script>
显示代码

多选选择器

可通过 multiple 属性设为多选选择器。

<template>
  <div className="idesign-demo-block-row">
    <i-select
      :value="currentValue"
      :options="options"
      multiple
      @change="handleChange"
    />
    <i-select
      :value="currentValue"
      :options="options"
      multiple
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '选项一',
    value: 'item1'
  },
  {
    content: '选项二',
    value: 'item2'
  },
  {
    content: '选项三',
    value: 'item3'
  }
]

const currentValue = ref('item1')

const handleChange = (val) => {
  console.log(val)
  currentValue.value = val
}
</script>
显示代码

级联选择器

可在 options 属性中为单项添加 children 属性指定级联菜单，另外可通过 cascaderDirection 来控制展开方向。

<template>
  <div className="idesign-demo-block-row">
    <i-select
      placeholder="级联选择器"
      :value="currentValue"
      :options="options"
      @change="handleChange"
    />
    <i-select
      placeholder="级联多选选择器"
      :value="currentValue"
      :options="options"
      :multiple="true"
      @change="handleChange"
    />
    <i-select
      placeholder="向左展开的级联选择器"
      :value="currentValue"
      :options="options"
      cascaderDirection="left"
      @change="handleChange"
    />
    <i-select
      placeholder="向左展开的级联多选选择器"
      :value="currentValue"
      :options="options"
      cascaderDirection="left"
      :multiple="true"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
  {
    content: '操作 1',
    value: 1
  },
  {
    content: '操作 2',
    value: 2,
    children: [
      {
        content: '操作 2-1',
        value: 2.1
      },
      {
        content: '操作 2-2',
        value: 2.2,
        children: [
          {
            content: '操作 2-2-1',
            value: 2.21
          },
          {
            content: '操作 2-2-2',
            value: 2.22
          },
          {
            content: '操作 2-2-3',
            value: 2.23
          }
        ]
      },
      {
        content: '操作 2-3',
        value: 2.3
      }
    ]
  },
  {
    content: '操作 3',
    value: 3
  }
]

const currentValue = ref([])

const handleChange = (val) => {
  console.log(val)
  currentValue.value = val
}
</script>
显示代码

Select Attributes

属性说明类型默认值
width选择器宽度string〡number100%
modelValue / v-model固定选中值（受控）string〡number〡(string〡number)[]--
defaultValue默认选中值（非受控）string〡number〡(string〡number)[]--
placeholder占位符string请选择
options下拉操作项DropdownOption[][]
size选择器尺寸"small"〡"medium"〡"large"medium
clearable是否可一键清空booleantrue
prefixIcon选择框前置图标名string--
suffixIcon选择框后置图标名string--
prefixIconClass选择框前置图标类名string--
suffixIconClass选择框后置图标类名string--
cascaderDirection级联子层级展开方向"left"〡"right"right
multiple是否可多选booleanfalse

Select Events

属性说明类型默认值
change选中值变化时触发(value: string〡number〡(string〡number)[]) => void--

SelectItem Attributes

属性说明类型默认值
content下拉操作项内容ReactNode--
value下拉操作项唯一标识string〡number--
disabled单项是否禁用booleanfalse
divider是否显示操作项之后的分隔线booleanfalse
title该下拉项上方组标题string--

SelectItem Events

属性说明类型默认值
click点击时触发(dropdownItem: DropdownOption, event: MouseEvent) => void--
Last Updated:
Contributors: Leophen