ume-ui

中文

English

中文

English

Appearance

Select 选择器 ​

下拉选择器组件，支持自定义内容和优雅的展开动画效果。

基础用法 ​

最简单的选择器用法，通过 items 属性快速创建选项列表。

vue
<template>
  <u-select
    v-model="value"
    :items="['选项 1', '选项 2', '选项 3', '选项 4', '选项 5']" />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('选项 1');
</script>

设置选中颜色 ​

通过 u-option 上的 color 属性设置选中状态的颜色。

vue
<template>
  <u-select v-model="value">
    <template #content>
      <u-option
        v-for="item in options"
        :key="item"
        :value="item"
        color="success">
        {{ item }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('选项 1');
  const options = ['选项 1', '选项 2', '选项 3'];
</script>

设置下拉对齐方式 ​

通过 align 属性设置下拉菜单的对齐方式。可选值包括 left 和 right。

vue
<template>
  <u-select
    v-model="value"
    align="right"
    style="width: 200px;"
    placeholder="Select a city">
    <template #content>
      <u-option
        style="width: 280px;"
        :value="item"
        v-for="item in ['Beijing', 'Shanghai', 'Guangzhou']"
        :key="item">
        {{ item }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
</script>

自定义触发器内容 ​

通过默认插槽自定义触发器显示内容。

当前选择: 请选择
vue
<template>
  <u-select v-model="value" :items="['北京', '上海', '广州', '深圳']">
    <span>当前选择: {{ value || '请选择' }}</span>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
</script>

禁用状态 ​

通过 disabled 属性禁用选择器。

vue
<template>
  <u-select v-model="value" disabled :items="['选项 1', '选项 2', '选项 3']" />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('选项 1');
</script>

自定义下拉内容 ​

通过 content 插槽使用 u-option 组件自定义下拉选项。

当前选择: 请选择
vue
<template>
  <u-select v-model="value">
    <span>当前选择: {{ value || '请选择' }}</span>
    <template #content>
      <u-option :value="item.value" v-for="item in options" :key="item.value">
        {{ item.label }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
  const options = [
    { value: 'beijing', label: '北京' },
    { value: 'shanghai', label: '上海' },
    { value: 'guangzhou', label: '广州' },
    { value: 'shenzhen', label: '深圳' },
  ];
</script>

禁用选项 ​

在 u-option 上设置 disabled 属性可以禁用特定选项。

当前选择: 请选择
vue
<template>
  <u-select v-model="value">
    <span>当前选择: {{ value || '请选择' }}</span>
    <template #content>
      <u-option
        :value="item.value"
        v-for="item in options"
        :key="item.value"
        :disabled="item.disabled">
        {{ item.label }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
  const options = [
    { value: 'a', label: '选项 A', disabled: false },
    { value: 'b', label: '选项 B', disabled: true },
    { value: 'c', label: '选项 C', disabled: false },
  ];
</script>

自定义选项样式 ​

通过 u-option 上的 height 和 radius 属性自定义选项样式。

当前选择: 1
vue
<template>
  <u-select v-model="value">
    <span>当前选择: {{ value || '请选择' }}</span>
    <template #content>
      <u-option height="48px" :value="i" v-for="i in 5">选项 {{ i }}</u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(1);
</script>

USelect API ​

属性说明类型默认值
modelValue当前选中值string | number-
disabled是否禁用booleanfalse
items选项列表Array<string | number>-
placeholder占位文本string-

USelect 事件 ​

事件名说明类型
change值变化时触发(value: string | number) => void

USelect 插槽 ​

插槽名说明
default触发器内容
content下拉内容

UOption API ​

属性说明类型默认值
value选项值string | number-
disabled是否禁用booleanfalse
color选中状态颜色'primary' | 'success' | 'warning' | 'error' | 'info'-
radius圆角string-
height选项高度string-

UOption 插槽 ​

插槽名说明
default选项内容