Kunlun DesignEnglish
Input
Enter characters with a mouse or keyboard.
Basic usage
The 'placeholder' attribute allows you to customize the input box prompt
<>
<template>
<kl-input v-model="input" placeholder="Please input"></kl-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
</script>
Password
By setting the 'type' property to 'password', you can set it as a password box, and add the 'showPassword' property to control whether the password can be viewed(The 'showPassword' attribute depends on icon, please import the icon library before using it, see icon) for details).
<>
<template>
<kl-input v-model="password" type="password" placeholder="Please input"> </kl-input>
<kl-input v-model="password1" type="password" placeholder="Please input password" showPassword>
</kl-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const password = ref('')
const password1 = ref('')
</script>
<style scoped>
.kl-input {
margin-top: 5px;
}
</style>
Disable usage
Add the 'disabled' attribute to set the input box to the disabled state.
<>
<template>
<kl-input v-model="password" placeholder="Please input" disabled> </kl-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const password = ref('')
</script>
Size
Use the size property to change the size of the input box. In addition to the default size, there are two other options: large, small.
<>
<template>
<kl-input v-model="inputLarge" placeholder="Please input" size="large"></kl-input>
<kl-input v-model="inputDefault" placeholder="Please input" size="default"></kl-input>
<kl-input v-model="inputSmall" placeholder="Please input" size="small"></kl-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const inputLarge = ref('')
const inputDefault = ref('')
const inputSmall = ref('')
</script>
<style scoped>
* {
margin-top: 5px;
}
</style>
Textarea
By setting the 'type' property to 'textarea', it can be customized as a text box; The 'rows' property can set the height of the text box, which defaults to 4 rows; The 'disabled' attribute disables the text box
<>
<template>
<kl-input v-model="input" placeholder="Please input text" type="textarea" :rows="4"></kl-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const input1 = ref('')
</script>
API
Attributes
| name | Description | Type | Default |
|---|---|---|---|
| placeholder | placeholder of Input | String | — |
| type | type of input | String | text |
| v-model | binding value | string/number | — |
| clearable | whether to show clear button, only works when type is not 'textarea' | boolean | fales |
| show-password | whether to show clear button, only works when type is not 'textarea' | boolean | fales |
| disabled | whether Input is disabled | boolean | fales |
| rows | number of rows of textarea, only works when type is 'textarea' | number | 4 |
| name | same as name in native input | string | — |
| readonly | same as readonly in native input | boolean | false |
| size | size of Input, works when type is not 'textarea' | 'large' / 'default' / 'small' | default |
| max | same as max in native input | — | — |
| min | same as min in native input | — | — |
| step | same as step in native input | — | — |
| autofocus | same as autofocus in native input | boolean | false |
| form | same as form in native input | string | — |
| input-style | the style of the input element or textarea element | string/object | {} |
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 | — |