Personal notes

Appearance

选择器 ​

当选项过多时，使用下拉菜单展示并选择内容。

基础用法 ​

适用广泛的基础单选 v-model 的值为当前被选中的 option 的 value 属性值。

1
基础选择器
Select 基础选择器
<script setup>
import { ref } from 'vue';
import Select from '@/components/Select/Select.vue';
const test = ref('1');
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true },
];
</script>
<template>
  <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" />
  <span>{{ test }}</span>
</template>
<script setup>
import { ref } from 'vue';
import Select from '@/components/Select/Select.vue';
const test = ref('1');
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true },
];
</script>
<template>
  <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" />
  <span>{{ test }}</span>
</template>