Appearance

Select 选择器 ​

下拉式选择器，常常用于单选选项
——该组件泛用性一般，对策性极强 (大杯)

基本使用 ​

通过options传入选项列表，并使用v-model双向绑定当前选中的值，即可实现最简单的单选组件

基本使用
<!-- 选择器基础使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSelect } from '@will1919/utopia-ui'
import { ref } from 'vue';

const selecthValue = ref('')
const selectOption = ref([
  { label: '弑君者', value: 'operator-1' },
  { label: '维什戴尔', value: 'operator-2' },
  { label: '伺夜', value: 'operator-3' }
])
</script>

<template>
  <div>
    <utp-select v-model="selecthValue" :options="selectOption" placeholder="小刻都知道选谁"></utp-select>
  </div>
</template>

禁用状态 ​

通过传入disabled来禁用选择器

禁用
<!-- 选择器禁用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSelect } from '@will1919/utopia-ui'
import { ref } from 'vue';

const selecthValue = ref('')
const selectOption = ref([
  {label: '弑君者', value: 'operator-1'},
  {label: '维什戴尔', value: 'operator-2'},
  {label: '伺夜', value: 'operator-3'}
])
</script>

<template>
  <div>
    <utp-select v-model="selecthValue" disabled :options="selectOption" placeholder="小刻都知道选谁"></utp-select>
  </div>
</template>

一键清空 ​

通过传入clearable来显示清除按钮

清空
<!-- 选择器一键清空 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSelect } from '@will1919/utopia-ui'
import { ref } from 'vue';

const selecthValue = ref('')
const selectOption = ref([
  {label: '弑君者', value: 'operator-1'},
  {label: '维什戴尔', value: 'operator-2'},
  {label: '伺夜', value: 'operator-3'}
])
</script>

<template>
  <div>
    <utp-select v-model="selecthValue" clearable :options="selectOption" placeholder="小刻都知道选谁"></utp-select>
  </div>
</template>

自定义选项样式 ​

通过renderLabel属性传入一个函数来自定义选项

自定义选项
<!-- 选择器自定义选项 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSelect } from '@will1919/utopia-ui'
import { ref, h } from 'vue';

const selecthValue = ref('')
const selectOption = ref([
  {label: '弑君者', value: 'operator-1'},
  {label: '维什戴尔', value: 'operator-2'},
  {label: '伺夜', value: 'operator-3'}
])
const renderLabelHadler = (option) => {
  return h('div', { style: 'font-weight: bold'}, [ h('i', { style: 'margin-right: 5px'}, option.label), h('span', { style: 'color: #e5e5e5'}, option.value) ])
}

</script>

<template>
  <div>
    <utp-select v-model="selecthValue" :options="selectOption" placeholder="小刻都知道选谁" :renderLabel="renderLabelHadler"></utp-select>
  </div>
</template>

快捷搜索 ​

通过传入filterable属性来开启快捷搜索

快捷搜索
<!-- 选择器快捷搜索 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSelect } from '@will1919/utopia-ui'
import { ref } from 'vue';

const selecthValue = ref('')
const selectOption = ref([
  {label: '弑君者', value: 'operator-1'},
  {label: '维什戴尔', value: 'operator-2'},
  {label: '伺夜', value: 'operator-3'}
])
</script>

<template>
  <div>
    <utp-select v-model="selecthValue" :options="selectOption" placeholder="小刻都知道选谁" filterable></utp-select>
  </div>
</template>

远程筛选 ​

支持通过远程搜索从服务器中查找数据，需要传入filterable，remote和remoteMethod

远程筛选
<!-- 选择器远程搜索 -->
<script setup>
import { ref } from 'vue'
// 路径导入参考安装部分
import { UtpSelect } from '@will1919/utopia-ui'
const selecthValue = ref('')
const operatorArr = ref([
  '信仰搅拌机',
  '荒芜拉普兰德',
  '娜仁图亚',
  '维什戴尔',
  '逻各斯',
  '刻俄柏',
  '艾雅法拉',
  '重岳',
  '令',
  '夕',
  '年',
  '黍',
  '余'
])

const remoteFilter = (query) => {
  return new Promise((resolve) => {
    if (query) {
      setTimeout(() => {

        const options = operatorArr.value.filter((item) => {
          return item.includes(query)
        }).map(label => {
          return { label, value: label }
        })
        resolve(options)
      }, 500)
    } else {
      resolve([])
    }
  })
}
</script>

<template>
  <div>
    <utp-select v-model="selecthValue" placeholder="小刻都知道怎么搜" filterable remote :remoteMethod="remoteFilter"></utp-select>
    <!-- <select-test></select-test> -->
  </div>
</template>

Select API ​

属性 ​

属性说明类型默认值
options设置选择器选项列表Array<SelectOptions>[ ]
placeholder设置选择题提示文本string—
disabled禁用选择器booleanfalse
clearable开启一键清空booleanfalse
renderLabel设置选择器选项自定义函数(option: SelectOptions) => VNode—
filterable开启快捷搜索booleanfalse
filterMethod设置快捷搜索方法，配合filterable使用(value: string) => SelectOptions[]—
remote开启远端搜索，配合filterable和remoteMethod使用booleanfalse
remoteMethod设置远端搜索方法，配合filterable和remote使用(value: string) => Promise<SelectOptions[]>—

SelectOptions对象属性 ​

属性说明类型默认值
label选项名称string—
value选项值string | number—
disabled是否禁用选项booleanfalse

事件 ​

事件名称说明事件类型
visible-change切换显示状态时的回调函数(visibleValue: boolean) => void
change切换选中的选项时的回调函数(selectValue: string | number) => void
clear点击清除按钮时的回调函数() => void