Select 勾选选择器

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

当你想要选择一个或者多个值

import { DuSelect } from 'dangoui'

示例

单选

<template>
  <PreviewBlock title="单组作为弹出组件">
    <DuButton @click="handleOpen">打开选择</DuButton>
    <DuButton @click="handleOpenWithConfirm">打开带确认按钮的选择</DuButton>
    <div>{{ value }}</div>
    <DuSelect :options="options" v-model:value="value" v-model:open="open" />
    <DuSelect :options="options" v-model:value="value" v-model:open="openWithConfirm" with-confirm />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSelect, DuButton } from 'dangoui'

const open = ref(false)
const openWithConfirm = ref(false)

const value = ref(null)

const options = [
  { label: '商品质量问题', value: 'a' },
  { label: '尺寸/容量与商品描述不符', value: 'b' },
  { label: '卖家发错货', value: 'c' },
  { label: '收到商品少件或破损', value: 'd', disabled: true },
  { label: '其他原因', value: 'e' }
]

function handleOpen() {
  open.value = true
}

function handleOpenWithConfirm() {
  openWithConfirm.value = true
}
</script>

多选

<template>
  <PreviewBlock title="单组作为弹出组件">
    <DuButton @click="handleOpen">打开选择</DuButton>
    <DuButton @click="handleOpenWithConfirm">打开带确认按钮的选择</DuButton>
    <div>{{ value }}</div>
    <DuSelect :options="options" v-model:value="value" v-model:open="open" mode="multiple" />
    <DuSelect :options="options" v-model:value="value" v-model:open="openWithConfirm" mode="multiple" with-confirm />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSelect, DuButton } from 'dangoui'

const open = ref(false)
const openWithConfirm = ref(false)

const value = ref([])

const options = [
  { label: '商品质量问题', value: 'a' },
  { label: '尺寸/容量与商品描述不符', value: 'b' },
  { label: '卖家发错货', value: 'c' },
  { label: '收到商品少件或破损', value: 'd', disabled: true },
  { label: '其他原因', value: 'e' }
]

function handleOpen() {
  open.value = true
}

function handleOpenWithConfirm() {
  openWithConfirm.value = true
}
</script>

可搜索

<template>
  <PreviewBlock title="单组作为弹出组件">
    <DuButton @click="handleOpen">打开选择</DuButton>
    <div>{{ value }}</div>
    <DuSelect :options="options" v-model:value="value" v-model:open="open" mode="multiple" filterable />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSelect, DuButton } from 'dangoui'

const open = ref(false)

const value = ref([])

const options = [
  { label: '商品质量问题', value: 'a' },
  { label: '尺寸/容量与商品描述不符', value: 'b' },
  { label: '卖家发错货', value: 'c' },
  { label: '收到商品少件或破损', value: 'd', disabled: true },
  { label: '其他原因', value: 'e' }
]

function handleOpen() {
  open.value = true
}
</script>

配合 form 使用（单选）

<template>
  <DuCard class="important-mt-4px" title="创建商品" guide-text="">
    <DuForm label-size="80px">
      <DuFormItem label="退货原因" required>
        <DuSelect :options="options" v-model:value="value" />
      </DuFormItem>
    </DuForm>
  </DuCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSelect, DuButton, DuCard, DuForm, DuFormItem } from 'dangoui'

const open = ref(false)

const value = ref(null)

const options = [
  { label: '商品质量问题', value: 'a' },
  { label: '尺寸/容量与商品描述不符', value: 'b' },
  { label: '卖家发错货', value: 'c' },
  { label: '收到商品少件或破损', value: 'd', disabled: true },
  { label: '其他原因', value: 'e' }
]

function handleOpen() {
  open.value = true
}
</script>

配合 form 使用（多选）

<template>
  <DuCard class="important-mt-4px" title="创建商品" guide-text="">
    <DuForm label-size="80px">
      <DuFormItem label="退货原因" required :show-border="false" items="start">
        <DuSelect :options="options" v-model:value="value" mode="multiple" />
      </DuFormItem>
    </DuForm>
  </DuCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSelect, DuButton, DuCard, DuForm, DuFormItem } from 'dangoui'

const open = ref(false)

const value = ref(null)

const options = [
  { label: '商品质量问题', value: 'a' },
  { label: '尺寸/容量与商品描述不符', value: 'b' },
  { label: '卖家发错货', value: 'c' },
  { label: '收到商品少件或破损', value: 'd', disabled: true },
  { label: '其他原因', value: 'e' },
  { label: 'x1', value: 'x1' },
  { label: 'x2', value: 'x2' },
  { label: 'x3', value: 'x3' },
  { label: 'x4', value: 'x4' },
  { label: 'x5', value: 'x5' },
  { label: 'x6', value: 'x6' },
  { label: 'x7', value: 'x7' },
  { label: 'x8', value: 'x8' }
]

function handleOpen() {
  open.value = true
}
</script>

API

属性

属性名	类型	默认值	说明
open	`boolean`	-	如果打开 popup
value	`string \| number \| string[] \| number[]`	`[]`	选中的值
title	`string`	`"\u8BF7\u9009\u62E9"`	placeholder（如果在 form item 中）和标题
confirm-text	`string`	`"\u786E\u8BA4"`	确认按钮的文字，当 `withConfirm` 为 `true` 时生效
form-item	`boolean`	`true`	如果为 true，当作为 `DuFormItem` 的子元素时，会自动显示表单项，如果为 false，则不会显示
filterable	`boolean`	`false`	可过滤的
filter-placeholder	`string`	`"\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22..."`	搜索框的 placeholder
with-confirm	`boolean`	`false`	是否带有 confirm button
mode	`"multiple"`	-	不提供为单选，multiple 为多选
options	`SelectOption[]`	-	选项列表

插槽

名称
default

事件

名称	类型
update:open	`(event: "update:open", open: boolean): void`
confirm	`(event: "confirm", value: SelectOption[]): void`
update:value	`(event: "update:value", value: string \| number \| string[] \| number[]): void`