ASelect

ASelect is a dropdown picker. Pass an items array of { text, value } options and bind the chosen value with v-model. Flip on multiple to let users pick more than one.

Import

import { Select } from '@any-design/anyui/vue';
// React:  import { Select } from '@any-design/anyui/react';
// Svelte: import { Select } from '@any-design/anyui/svelte';

Basic usage

<template>
  <ASelect v-model="city" :items="cities" placeholder="Pick a city" />
</template>

<script setup>
import { ref } from 'vue';
const city = ref('');
const cities = [
  { text: 'Tokyo', value: 'tokyo' },
  { text: 'Paris', value: 'paris' },
  { text: 'New York', value: 'ny' },
];
</script>

Examples

Sizes and round

<template>
  <div class="demo-col">
    <ASelect v-model="small" size="small" :items="items" placeholder="Small" />
    <ASelect v-model="regular" :items="items" placeholder="Default" />
    <ASelect v-model="rounded" round :items="items" placeholder="Round" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const small = ref('');
const regular = ref('');
const rounded = ref('');
const items = [
  { text: 'Design', value: 'design' },
  { text: 'Build', value: 'build' },
  { text: 'Ship', value: 'ship' },
];
</script>

Multiple selection

With multiple, the bound value is an array.

<template>
  <ASelect v-model="tags" :items="items" multiple placeholder="Pick tags" />
  <p>Selected: {{ tags }}</p>
</template>

<script setup>
import { ref } from 'vue';
const tags = ref([]);
const items = [
  { text: 'Vue', value: 'vue' },
  { text: 'React', value: 'react' },
  { text: 'Svelte', value: 'svelte' },
];
</script>

Disabled

<template>
  <div class="demo-col">
    <ASelect :items="items" disabled placeholder="Disabled" />
    <ASelect model-value="design" :items="items" disabled />
  </div>
</template>

<script setup>
const items = [
  { text: 'Design', value: 'design' },
  { text: 'Build', value: 'build' },
  { text: 'Ship', value: 'ship' },
];
</script>

Props

Prop	Type	Default	Description
modelValue	String | Number | Array | null	‘’	Bound value (array when multiple).
items	Array<{ text, value }>	undefined	Options list.
placeholder	String	‘’	Placeholder text.
width	String | Number	‘100%’	Width of the select.
size	‘default’ | ‘small’ | ‘large’	‘default’	Size.
round	Boolean	false	Rounded control.
multiple	Boolean	false	Enable multi-select.
disabled	Boolean	false	Disabled.
expandIcon	String | IconifyIcon	‘ic:outline-expand-more’	Trailing expand icon.

Events

Event	Payload	Description
update:modelValue	value	Value change.
change	value	Fires on commit.
blur	FocusEvent	Native blur.

ASelect

ASelect 是下拉选择器。传入 { text, value } 形式的 items 选项数组，用 v-model 绑定已选值。开启 multiple 即可多选。

引入

import { Select } from '@any-design/anyui/vue';
// React:  import { Select } from '@any-design/anyui/react';
// Svelte: import { Select } from '@any-design/anyui/svelte';

基础用法

<template>
  <ASelect v-model="city" :items="cities" placeholder="选择城市" />
</template>

<script setup>
import { ref } from 'vue';
const city = ref('');
const cities = [
  { text: '东京', value: 'tokyo' },
  { text: '巴黎', value: 'paris' },
  { text: '纽约', value: 'ny' },
];
</script>

示例

尺寸与圆角

<template>
  <div class="demo-col">
    <ASelect v-model="small" size="small" :items="items" placeholder="Small" />
    <ASelect v-model="regular" :items="items" placeholder="Default" />
    <ASelect v-model="rounded" round :items="items" placeholder="Round" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const small = ref('');
const regular = ref('');
const rounded = ref('');
const items = [
  { text: '设计', value: 'design' },
  { text: '开发', value: 'build' },
  { text: '发布', value: 'ship' },
];
</script>

多选

开启 multiple 后，绑定的值为数组。

<template>
  <ASelect v-model="tags" :items="items" multiple placeholder="选择标签" />
  <p>已选：{{ tags }}</p>
</template>

<script setup>
import { ref } from 'vue';
const tags = ref([]);
const items = [
  { text: 'Vue', value: 'vue' },
  { text: 'React', value: 'react' },
  { text: 'Svelte', value: 'svelte' },
];
</script>

禁用

<template>
  <div class="demo-col">
    <ASelect :items="items" disabled placeholder="禁用" />
    <ASelect model-value="design" :items="items" disabled />
  </div>
</template>

<script setup>
const items = [
  { text: '设计', value: 'design' },
  { text: '开发', value: 'build' },
  { text: '发布', value: 'ship' },
];
</script>

属性

属性	类型	默认值	说明
modelValue	String | Number | Array | null	‘’	绑定值（多选时为数组）。
items	Array<{ text, value }>	undefined	选项列表。
placeholder	String	‘’	占位文本。
width	String | Number	‘100%’	选择器宽度。
size	‘default’ | ‘small’ | ‘large’	‘default’	尺寸。
round	Boolean	false	圆角样式。
multiple	Boolean	false	开启多选。
disabled	Boolean	false	禁用。
expandIcon	String | IconifyIcon	‘ic:outline-expand-more’	尾部展开图标。

事件

事件	载荷	说明
update:modelValue	value	值变化。
change	value	提交时触发。
blur	FocusEvent	原生 blur。