通过输入框得到用户想传递的信息
import { UInput } from 'ungeui';
响应式：Hello ungeui
🤝基本用法绑定用户输入的值<template>
<div>
<u-space vertical>
<h4>响应式：{{ value }}</h4>
<u-input placeholder="大" size="large" v-model:value="value">大</u-input>
</u-space>
</div>
</template>
<script setup>
import { UInput, USpace } from 'ungeui';
import { ref } from 'vue';
let value = ref('Hello ungeui');
</script>
🔥基本用法size控制输入框的大小，提供了small、medium、large三个尺寸<template>
<div>
<u-space vertical>
<u-input placeholder="小" size="small">小</u-input>
<u-input placeholder="中" size="medium">中</u-input>
<u-input placeholder="大" size="large">大</u-input>
</u-space>
</div>
</template>
<script setup>
import { UInput,USpace } from 'ungeui';
</script>
🙈基本用法密码框用于隐藏输入的字符<template>
<div>
<u-input
type="password"
placeholder="请输入密码"
size="large"
></u-input>
</div>
</template>
<script setup>
import { UInput } from 'ungeui';
</script>
🙌基本用法可以插入Icon更加语义化，告诉用户这里应该输入的类型<template>
<div>
<u-input placeholder="内容" size="large">
<template #prefix>
<u-icon :size="20">
<IconSearch />
</u-icon>
</template>
<template #suffix>
<u-icon :size="20">
<IconPlay />
</u-icon>
</template>
</u-input>
</div>
</template>
<script setup>
import { UButton, UIcon, UInput } from 'ungeui';
import { IconSearch, IconPlay } from '@ungeui/icons';
</script>
📋️基本用法支持以文本域的形式表现<template>
<div>
<u-input type="textarea"></u-input>
</div>
</template>
<script setup>
import { UInput } from 'ungeui';
</script>
🥨基本用法自定义行数列数，和原生原来用法一样<template>
<div>
<u-input type="textarea" :rows="8"></u-input>
</div>
</template>
<script setup>
import { UInput } from 'ungeui';
</script>
🚫基本用法禁用后，用户不能输入任何内容<template>
<div>
<u-space vertical>
<u-input type="textarea" value="被禁用啦！" disabled></u-input>
<u-input type="text" value="被禁用啦！" disabled></u-input>
</u-space>
</div>
</template>
<script setup>
import { UInput,USpace } from 'ungeui';
</script>
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 输入框大小 | 'small' | 'medium' | 'large' | 'medium' |
| type | 输入框类型 | 'text' | 'textarea' | 'password' | 'text' |
| rows | 行数 | number | 4 |
| cols | 列数 | number | 4 |
| disabled | 是否禁用 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prefix | 输入框前缀 | string | undefined |
| suffix | 输入框后缀 | string | undefined |