Select

When there are too many options, use the drop-down menu to display and select content.

Basic usage

The value of the widely applicable base radio 'v-model' is the value of the 'value' attribute of the currently selected 'kl-option', via 'placeholder' The property can set the booth text, not set the default to: 'Please enter a keyword'

Please enter a keyword

<template>
    <kl-select v-model="value">
        <kl-option value="胡桃"></kl-option>
        <kl-option value="夜兰"></kl-option>
        <kl-option value="七七"></kl-option>
    </kl-select>
</template>

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

const value = ref()
</script>

<style lang="scss" scoped>
* {
    margin-left: 5px;
}
</style>

Disabled select

Disable the entire selector component, add the 'disabled' attribute, and the entire selector is unavailable.

Please enter a keyword

<template>
    <kl-select v-model="value" disabled>
        <kl-option value="胡桃"></kl-option>
        <kl-option value="夜兰"></kl-option>
        <kl-option value="七七"></kl-option>
    </kl-select>
</template>

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

const value = ref()
</script>

<style lang="scss" scoped>
* {
    margin-left: 5px;
}
</style>

Disabled option

In 'kl-option', set the 'disabled' value to 'true' to disable the option

Please enter a keyword

<template>
    <kl-select v-model="value">
        <kl-option value="胡桃" disabled></kl-option>
        <kl-option value="夜兰"></kl-option>
        <kl-option value="七七"></kl-option>
    </kl-select>
</template>

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

const value = ref()
</script>

<style lang="scss" scoped>
* {
    margin-left: 5px;
}
</style>

Option label

The label of 'kl-option' can be set via the 'label' attribute of 'kl-option', or it can be written inside 'kl-option' without setting the default value of 'value'.

Please enter a keyword

<template>
    <kl-select v-model="value">
        <kl-option value="胡桃">HuTao</kl-option>
        <kl-option value="夜兰" label="YeLan"></kl-option>
        <kl-option value="七七" label="QiQi"></kl-option>
    </kl-select>
</template>

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

const value = ref()
</script>

<style lang="scss" scoped>
* {
    margin-left: 5px;
}
</style>

Size

Use the 'size' property to change the size of the drop-down selection box. In addition to the default size, there are two other options: 'large', 'small'.

Please enter a keyword

<template>
    <kl-select v-model="value2" size="large">
        <kl-option value="胡桃">HuTao</kl-option>
        <kl-option value="夜兰">YeLan</kl-option>
        <kl-option value="七七">QiQi</kl-option>
    </kl-select>
    <kl-select v-model="value1">
        <kl-option value="胡桃">HuTao</kl-option>
        <kl-option value="夜兰">YeLan</kl-option>
        <kl-option value="七七">QiQi</kl-option>
    </kl-select>
    <kl-select v-model="value3" size="small">
        <kl-option value="胡桃">HuTao</kl-option>
        <kl-option value="夜兰">YeLan</kl-option>
        <kl-option value="七七">QiQi</kl-option>
    </kl-select>
</template>

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

const value1 = ref()
const value2 = ref()
const value3 = ref()
</script>

<style lang="scss" scoped>
* {
    margin-top: 5px;
}
</style>

Singles can be cleared

You can use the clear icon to clear the selection.

Set the 'clearable' property for 'kl-select' to empty the selector.

Please enter a keyword

<template>
    <kl-select v-model="value" clearable>
        <kl-option value="胡桃"></kl-option>
        <kl-option value="夜兰"></kl-option>
        <kl-option value="七七"></kl-option>
    </kl-select>
</template>

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

const value = ref()
</script>

<style lang="scss" scoped>
* {
    margin-left: 5px;
}
</style>

API

Select Attribute

name	Description	Type	The default value is
v-model	binding value	boolean	—
disabled	whether Select is disabled	boolean	fales
size	size of Input(large/default/small)	string	default
clearable	whether select can be cleared	boolean	false
placeholder	placeholder	string	—

Option Attribute

name	Description	Type	The default value is
value	value of option	string / number / boolean / object	—
label	label of option, same as value if omitted	string/number	—
disabled	whether option is disabled	boolean	false
icon	Use the icon icon as a label, not with text	String	—

Select Event

Name	Description	Callback parameters
change	Triggered only when the modelValue changes	val
clear	Fires when the Clear button generated by the clearable property is clicked	—

Select #

Basic usage #

Disabled select #

Disabled option #

Option label #

Size #

Singles can be cleared #

API #

Select Attribute #

Option Attribute #

Select Event #

Select

Basic usage

Disabled select

Disabled option

Option label

Size

Singles can be cleared

API

Select Attribute

Option Attribute

Select Event