lb-vue-ui

Appearance

Select 选择器 ​

用于在多个备选项中选中单个结果。

基础用法 ​

<template>
  <lb-select v-model="value" placeholder="请选择">
    <lb-select-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </lb-select>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

禁用状态 ​

<template>
  <lb-select v-model="value" placeholder="请选择" disabled>
    <lb-select-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </lb-select>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

尺寸 ​

<template>
  <div style="display: flex; gap: 10px">
    <lb-select v-model="value" placeholder="请选择" size="small">
      <lb-select-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </lb-select>
    <lb-select v-model="value" placeholder="请选择" size="base">
      <lb-select-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </lb-select>
    <lb-select v-model="value" placeholder="请选择" size="large">
      <lb-select-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </lb-select>
  </div>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

筛选功能 ​

TIP

可以通过 filterable-method 自定义筛选逻辑。

<template>
  <lb-select v-model="value" placeholder="请选择" filterable>
    <lb-select-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </lb-select>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

多选功能 ​

<template>
  <lb-select v-model="selectArr" multiple filterable>
    <lb-select-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    ></lb-select-option>
  </lb-select>
</template>

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

value-key ​

TIP

当选项的标签和值不是简单的字符串时，需要通过 value-key 指定选项的值的键名。

选中的值: 
<template>
  <lb-select v-model="selectValue" value-key="id">
    <lb-select-option
      v-for="option in options"
      :key="option.id"
      :label="option.name"
      :value="option"
    ></lb-select-option>
  </lb-select>
  <span>选中的值: {{ selectValue }}</span>
</template>
<script setup>
import { ref } from "vue";
const selectValue = ref("");
const options = ref([
  {
    id: 1,
    name: "选项1",
  },
  {
    id: 2,
    name: "选项2",
  },
]);
</script>

Select Props ​

属性名说明类型可选值默认值
modelValue / v-model绑定值string | number | boolean | null—null
placeholder占位符string—''
disabled是否禁用booleantrue | falsefalse
sizeSelect 的尺寸"small" | "base" | "large"small, base, largebase
clearable是否可清空booleantrue | falsefalse
filterable是否可搜索booleantrue | falsefalse
filterable-method自定义筛选逻辑(value: string, option: SelectOption) => boolean——
multiple是否多选booleantrue | falsefalse
value-key选项的值的键名string—value

Select Events ​

事件名说明回调参数
change绑定值变化时触发的事件(value: string | number | boolean | null) => void
update:modelValue绑定值变化时触发的事件(value: string | number | boolean | null) => void
clear清空时触发的事件() => void

SelectOption Props ​

属性名说明类型可选值默认值
value选项的值string | number | boolean——
label选项的标签string——
disabled是否禁用booleantrue | falsefalse

SelectOption Events ​

事件名说明回调参数
select选中时触发的事件(value: string | number | boolean) => void