lc-vue-biz-select-1.1.8

Appearance

On this page

lc-vue-biz-select ​

安装 ​

npm i lc-vue-biz-select

基础用法 ​

value1:

vue
<script setup>
import {BizSelect} from 'lc-vue-biz-select'
import {ref} from 'vue'

const value1 = ref();

const fetchData = async ()=>{
  return [{
    label:'aaa',
    value:1
  }, {
    label:'bbb',
    value:2
  }]
}
</script>

<template>
  <el-card>
    <biz-select :fetchData='fetchData' v-model='value1'/>
  </el-card>
</template>

单选 ​

远程数据 ​

select：

label：

vue
<template>
  <biz-select
    v-model='value1'
    v-model:label='label1'
    :fetch-data='fetchData'
    remote
    filterable />
  <p>select：{{ value1 }}</p>
  <p>label：{{ label1 }}</p>
</template>

<script setup lang="ts">
import { BizSelect } from 'lc-vue-biz-select';
import { ref } from 'vue';

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming'
];

const list = states.map((item) => ({
  value: `value:${item}`,
  label: `label:${item}` 
}));

const value1 = ref();
const label1 = ref();
const loading = ref(false);

const fetchData = (query = '') => new Promise(resolve => {
  if (query !== '') {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      const l = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
      resolve(l);
    }, 200);
  } else {
    setTimeout(() => {
      resolve(list);
    }, 200);
  }
});
</script>

<style scoped>

</style>

多选 ​

远程数据 ​

select：[]

label：[]

vue
<template>
  <biz-select
    v-model='value1'
    v-model:label='label1'
    :fetch-data='fetchData'
    remote
    multiple
    filterable />
  <p>select：{{ value1 }}</p>
  <p>label：{{ label1 }}</p>
</template>

<script setup lang="ts">
import { BizSelect } from 'lc-vue-biz-select';
import { ref } from 'vue';

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming'
];

const list = states.map((item) => ({
  value: `value:${item}`,
  label: `label:${item}` 
}));

const value1 = ref([]);
const label1 = ref([]);
const loading = ref(false);

const fetchData = (query = '') => new Promise(resolve => {
  if (query !== '') {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      const l = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
      resolve(l);
    }, 200);
  } else {
    setTimeout(() => {
      resolve(list);
    }, 200);
  }
});
</script>

<style scoped>

</style>

Api ​

Attributes ​

属性名说明类型默认值
fetchData获取下拉选择数据(query?:string)=>Promise<{value: numberstring, label:string}[]>
modelValue/v-model选中值多选：string[] | number[] ; 单选：string | number-
placeholderplaceholderstring请选择
multiple是否多选booleanfalse
filterable是否可过滤booleanfalse
oneLine是否只显示一行，针对多选场景booleanfalse
disabled是否不可用booleanfalse
value-key作为 value 唯一标识的键名，绑定值为对象类型时必填stringvalue
size输入框尺寸string large/default/smalldefault
clearable是否可以清空选项booleantrue
multiple-limit多选时用户最多可以选择的项目数， 为 0 则不限制number0
nameSelect 输入框的原生 name 属性string—
effectTooltip 主题，内置了 dark / light 两种stringlight
autocomplete自动完成选择输入stringoff
placeholderselect input的原生autocomplete属性string请选择
filterable是否可筛选booleanfalse
allow-create是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。booleanfalse
reserve-keyword筛选时，是否在选择选项后保留关键字booleantrue
no-data-text选项为空时显示的文本，也可以使用 empty 插槽自定义内容string无数据
popper-class选择器下拉菜单的自定义类名string—
teleported该下拉菜单是否使用teleport插入body元素boolean true / falsetrue
persistent当下拉选择器未被激活并且persistent设置为false，选择器会被删除。boolean true / falsetrue
popper-options自定义 popper 选项，更多请参考 popper.jsobject-
automatic-dropdown对于不可过滤的 Select 组件，此属性决定是否在输入框获得焦点后自动弹出选项菜单booleanfalse
height下拉菜单的高度，每一个子选项的高度是 34pxnumber170
scrollbar-always-on是否总是展示滚动条booleanfalse
remote 是否从服务器搜索数据booleanfalse
validate-event输入时是否触发表单的校验booleantrue
placement下拉框出现的位置string top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom-start

Events ​

事件名说明类型
update:modelValue选中值变化多选：string[] | number[] ; 单选：string | number
update:label选中文案变化string
change选中值发生变化时触发val，目前的选中值
visible-change下拉框出现/隐藏时触发val，出现则为 true，隐藏则为 false
remove-tag多选模式下移除tag时触发val，移除的tag值
clear可清空的单选模式下用户点击清空按钮时触发—
blur当选择器的输入框失去焦点时触发(event: FocusEvent)
focus当选择器的输入框获得焦点时触发(event: FocusEvent)

Slots ​

插槽名说明
default自定义 Option 模板
empty自定义当选项为空时的内容
prefix输入框的前缀