Input 输入框

通过鼠标或键盘输入字符。

TIP

ps: 本组件会处理v-model的绑定值，但组件不支持v-model修饰符，如需使用修饰符，请自行处理。

基本用法

<template>
    <ym-input v-model="value" placeholder="请输入内容" style='width: 300px'></ym-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

禁用状态

可以使用disabled属性来禁用输入框。

<template>
    <ym-input disabled v-model="value" placeholder="请输入内容" style='width: 300px'></ym-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

一键清空

可以使用clearable属性来指定输入框是否可一键清空。输入聚焦之后，右侧会出现一个清空按钮，点击清空按钮即可清空输入框内容。（输入框没有内容时无效）

<template>
    <ym-input clearable v-model="value" placeholder="请输入内容" style='width: 300px'></ym-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

密码框

可以使用type="password"属性来指定输入框为密码框。密码框默认会隐藏输入内容。可以使用showPassword属性来指定密码框是否需要显示密码，指定属性之后右侧会有一个显示按钮，可以切换输入信息的显示。这个属性只有在type="password"时生效。

<template>
    <ym-input type="password" showPassword v-model="value" placeholder="请输入内容" style='width: 300px'></ym-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

自定义图标

可以使用prefix和suffix插槽来自定义图标。。图标会显示在输入框的内部，显示在输入框的起始位置和结束位置。也可以通过prepend和append插槽来自定义图标。图标会显示在输入框的起始位置和结束位置。

头部

尾部

<template>
    <ym-input 
     v-model="value2" 
     placeholder="请输入内容" 
     style='width: 300px'
     >
     <template #prefix>
        <ym-icon icon="star"></ym-icon>
     </template>
     <template #suffix>
        <ym-icon icon="search"></ym-icon>
     </template>
     <template #prepend>
        头部
     </template>
     <template #append>
        尾部
     </template>
     </ym-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value2 = ref('')
</script>

文本域

可以使用type="textarea"属性来指定输入框为文本域。文本域默认会显示多行输入框。

<template>
    <ym-input type="textarea" v-model="value" placeholder="请输入内容" ></ym-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

尺寸

可以使用size属性来指定输入框的大小。除了默认大小外，还可以指定small、large两种尺寸。默认尺寸不需要指定size属性。

<template>
   <div class="container">
    <ym-input  size="small" placeholder="请输入内容" ></ym-input>
    <ym-input  placeholder="请输入内容" ></ym-input>
    <ym-input  size="large" placeholder="请输入内容" ></ym-input>
   </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.container {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>

Input API

Props

Name	Description	Type	Default
type	类型	enum - 'text' | 'password' | 'textarea'	text
v-model	绑定值	string / number	-
disabled	是否禁用	boolean	false
clearable	是否可一键清空	boolean	false
showPassword	密码框是否显示密码	boolean	false
size	输入框大小	enum - 'small' | 'large'	-
placeholder	输入框占位符	string	""
readonly	是否只读	boolean	false
autocomplete	输入框自动补全	string	-
autofocus	输入框自动聚焦	boolean	false

Events

Name	Description	Type
update:modelValue	修改值	(value: string) => void
input	输入值	(value: string) => void
change	修改值且 失去焦点	(value: string) => void
focus	聚焦	(event: FocusEvent) => void
blur	失焦	(event: FocusEvent) => void
clear	清空	() => void

Exposes

Name	Description	Type
blur	输入框失焦	() => void
focus	输入框聚焦	() => void
clear	清空输入框内容	() => void
select	选中输入框内容	() => void

Slots

Name	Description
prefix	输入框起始位置图标
suffix	输入框结束位置图标
prepend	输入框前置内容
append	输入框后置内容