antd vue 输入框基础案例

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>