Select 选择器

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

基础用法

TIP

使用 v-model 绑定开关的选中状态。

可以使用ym-option来定义选项，使用v-model绑定开关的选中状态。

<template>
    <ym-select v-model="value" placeholder="请选择">
        <ym-option label="选项1" value="1"></ym-option>
        <ym-option label="选项2" value="2"></ym-option>
        <ym-option label="选项3" value="3"></ym-option>
    </ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>

</style>

props定义选项

可以使用 options 属性来定义选项，可以传入一个选项数组。

<template>
    <ym-select v-model="value" placeholder="请选择" :options="options">
    </ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const options = [
    {
        label: '选项1',
        value: '1'
    },
    {
        label: '选项2',
        value: '2'
    },
    {
        label: '选项3',
        value: '3'
    }
]
</script>

<style scoped>

</style>

禁用状态

可以使用disabled属性来控制组件的禁用状态。

<template>
    <ym-select v-model="value" placeholder="请选择" disabled>
        <ym-option label="选项1" value="1"></ym-option>
        <ym-option label="选项2" value="2"></ym-option>
        <ym-option label="选项3" value="3"></ym-option>
    </ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>

</style>

选项禁用

选择框选项ym-option组件可以通过 disabled 属性来禁用，如果是props传入的选项，可以使用disabled属性来禁用。

<template>
    <ym-select v-model="value1" placeholder="请选择">
        <ym-option label="选项1" value="1" disabled></ym-option>
        <ym-option label="选项2" value="2"></ym-option>
        <ym-option label="选项3" value="3"></ym-option>
    </ym-select>
    <ym-select v-model="value2" placeholder="请选择" :options="options"></ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')

const options = [
    { label: '选项1', value: '1', disabled: true},
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
]
</script>

<style scoped>

</style>

可清空单选

可以使用 clearable 属性来控制是否显示清空按钮。

<template>
    <ym-select v-model="value" placeholder="请选择" clearable>
        <ym-option label="选项1" value="1"></ym-option>
        <ym-option label="选项2" value="2"></ym-option>
        <ym-option label="选项3" value="3"></ym-option>
    </ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped>

</style>

自定义选项内容

可以使用 renderLabel 属性来自定义label内容，该属性接受一个函数，函数参数为option对象，需要返回一个string或者VNode。props和options传入的选项都可以使用renderLabel属性。

返回String

返回VNode

<template>
    
    <div class="container">
        <h3>返回String</h3>
        <ym-select v-model="value1" placeholder="请选择" :renderLabel="renderLabel1">
        <ym-option label="选项1" value="1"></ym-option>
        <ym-option label="选项2" value="2"></ym-option>
        <ym-option label="选项3" value="3"></ym-option>
    </ym-select>
    </div>
    <div class="container">
        <h3>返回VNode</h3>
        <ym-select v-model="value2" placeholder="请选择" :renderLabel="renderLabel2">
        <ym-option label="选项1" value="1"></ym-option>
        <ym-option label="选项2" value="2"></ym-option>
        <ym-option label="选项3" value="3"></ym-option>
    </ym-select>
    </div>
</template>

<script setup lang="ts">
import { ref , h} from 'vue'
import   { type SelectOptionProps, YmButton } from 'guyan-ym-ui';

const value1 = ref('')
const value2 = ref('')

const renderLabel1 = (option: SelectOptionProps) => {
        return `这个是${option.label}`
}
const renderLabel2 = (option: SelectOptionProps) => {
    return h(YmButton, { type: 'primary' }, `这个是${option.label}`)
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
}
h3 {
    margin: 20px 0;
}
</style>

可输入检索框

可以使用 filterable 属性控制选项框的输入检索，可以使用 filterMethod 属性自定义过滤方法。如果不传递filterMethod属性，则默认使用label属性进行过滤。

<template>
    <ym-select 
    v-model="value"
     placeholder="请选择"
     filterable
     :filterMethod="filterMethod"
     :options="options"
    >
    </ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const options = [
    {
        value: '1',
        label: '选项1'
    },
    {
        value: '2',
        label: '选项2'
    },
    {
        value: '3',
        label: '选项3'
    },
    {
        value: '4',
        label: '选项4'
    },
    {
        value: '5',
        label: '选项5'
    }
]

const filterMethod = (value: string) => {
    return options.filter(item => item.label.includes(value))
}
</script>

<style scoped>

</style>

远程检索

输入关键字以从远程服务器中查找数据。

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remoteMethod。 remoteMethod为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

<template>
    <ym-select 
    v-model="value"
     placeholder="请选择"
     filterable
     remote
     :options="options"
     :remoteMethod="remoteMethod"
    >
    </ym-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const options = [
    {
        value: '1',
        label: '选项1'
    },
    {
        value: '2',
        label: '选项2'
    },
    {
        value: '3',
        label: '选项3'
    },
    {
        value: '4',
        label: '选项4'
    },
    {
        value: '5',
        label: '选项5'
    }
]

const remoteMethod = (query: string) => {
   if(query) {
       return new Promise((resolve) => {
        setTimeout(() => {
                resolve(options.filter(item => item.label.includes(query)))
            },
        1000)
       })
   }
    
}
</script>

<style scoped>

</style>

Select API

Props

Name	Description	Type	Default
v-model	绑定value值	`boolean`	-
disabled	是否禁用	`boolean`	false
options	选项数组	`SelectOptionProps[]`	-
placeholder	文字占位符（原生）	`string`	-
clearable	是否显示清空按钮	`boolean`	false
filterable	是否可检索	`boolean`	false
remote	是否开启远程检索	`boolean`	false
renderLabel	自定义渲染函数	`RenderLabelFunc`	-
filterMethod	检索函数	`CustomFilterFunc`	-
remoteMethod	远程检索函数	`CustomFilterRemoteFunc`	-

Events

Name	Description	Type
update:modelValue	绑定值改变时触发	`(visible: boolean) => void`
change	绑定值改变时触发	`(visible: string) => void`
visible-change	绑定值改变时触发	`(visible: boolean) => void`
visible-change	选择框显示状态切换时触发	`(visible: boolean) => void`
clear	清空选项时触发	`() => void`
focus	选择框聚焦触发	`() => void`
blur	清选择框失焦触发	`() => void`

Expose

Name	Description	Type
blur	失焦	`() => void`
focus	聚焦	`() => void`

Option API

Props

Name	Description	Type	Default
value	选项值	`string`	-
label	选项名	`string`
disabled?	是否禁用	`disabled`	false

Types

SelectOptionProps

interface SelectOptionProps {
  value: string;
  label?: string;
  disabled?: boolean;
}

RenderLabelFunc

type RenderLabelFunc = (option: SelectOptionProps) => string;

CustomFilterFunc

type CustomFilterFunc = (query: string, option: SelectOptionProps) => boolean;

CustomFilterRemoteFunc

type CustomFilterRemoteFunc = (query: string) => void;

Select 选择器 ​

基础用法 ​

props定义选项 ​

禁用状态 ​

选项禁用 ​

可清空单选 ​

自定义选项内容 ​

返回String

返回VNode

可输入检索框 ​

远程检索 ​

Select API ​

Props ​

Events ​

Expose ​

Option API ​

Props ​

Types ​

SelectOptionProps ​

RenderLabelFunc ​

CustomFilterFunc ​

CustomFilterRemoteFunc ​

Select 选择器

基础用法

props定义选项

禁用状态

选项禁用

可清空单选

自定义选项内容

可输入检索框

远程检索

Select API

Props

Events

Expose

Option API

Props

Types

SelectOptionProps

RenderLabelFunc

CustomFilterFunc

CustomFilterRemoteFunc