# 4.9 下拉选择（Select）

下拉选择组件

# 基础用法

<template>
  <dof-select
    :show="show"
    :items="items"
    :index="index"
    @itemClick="onItemClick"
    @close="show = false"
  ></dof-select>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      index: 0,
      items: [
        { key: 'option1', value: '选项一' },
        { key: 'option2', value: '选项二' },
      ],
    }
  },
  methods: {
    onItemClick({ item, index }) {
      this.index = index
      console.log(item)
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# Attributes

Prop Type Required Default Description
show Boolean N false 是否显示
title String N '请选择' 标题，当前版本未在模板中展示
items Array N [] 选项数据，每项应包含 key、value，可选 disabled
index Number | String N null 当前选中项索引
key-field String N 'key' 选项键字段
value-field String | Array N 'value' 选项展示字段
button String N '取消' 取消按钮文本，当前版本未在模板中使用
rows Number N 5 最大显示行数
hide-on-mask Boolean N true 点击遮罩是否关闭
is-show-icon Boolean N false 是否显示图标
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

# Events

事件名 说明 回调参数
itemClick 点击选项 { item, index, key }；通过确认按钮触发时第三项为 keyField
close 关闭选择器 -

← 滚轮选择器（DofPicker） →