11 Input 输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用

需要用户输入表单域内容时。
提供组合型输入框，带搜索的输入框，还可以进行大小选择。

案例：基本用法

<script setup>
import {ref, watch} from "vue";const value = ref("")watch(value, ()=>{console.log("value变化了：", value.value)
})</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-input placeholder="基本用法" v-model:value="value"/></div>
</template>

案例：延迟同步

核心是 v-model:value.lazy="value1"，双向绑定使用 lazy 进行修饰。

<script setup>
import {ref, watch} from "vue";const value = ref("")watch(value, ()=>{console.log("value变化了：", value.value)
})</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-input placeholder="基本用法" v-model:value.lazy="value"/></div>
</template>

案例：自动聚焦

核心是添加 autofocus 属性。

<script setup>
import {ref, watch} from "vue";const value = ref("")watch(value, ()=>{console.log("value变化了：", value.value)
})</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-input placeholder="基本用法" v-model:value.lazy="value" autofocus/></div>
</template>

案例：高度自适应

核心：

• 必须是 textarea 组件
• 必须添加 auto-size 属性
• 最好不要使用 lazy 延迟同步

<script setup>
import {ref, watch} from "vue";const value = ref("")watch(value, ()=>{console.log("value变化了：", value.value)
})</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-textarea placeholder="基本用法" v-model:value="value" autofocus auto-size/></div>
</template>

案例：自动高度是一个对象

核心：:auto-size="{ minRows: 2, maxRows: 5}"

<script setup>
import {ref, watch} from "vue";const value = ref("")watch(value, ()=>{console.log("value变化了：", value.value)
})</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-textarea placeholder="基本用法" v-model:value="value" autofocus:auto-size="{ minRows: 2, maxRows: 5}"/></div>
</template>