input输入框的前缀和后缀

案例：前缀插槽

核心：

<template #prefix><user-outlined />
</template>

<script setup>
import {ref, watch} from "vue";
import {UserOutlined} from "@ant-design/icons-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" autofocus><template #prefix><UserOutlined/></template></a-input></div>
</template>

案例：后缀插槽

核心：

<template #suffix><a-tooltip title="Extra information"><info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" /></a-tooltip>
</template>

<script setup>
import {ref, watch} from "vue";
import {UserOutlined, InfoCircleOutlined} from "@ant-design/icons-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" autofocus><template #suffix><InfoCircleOutlined class="text-red-500"/></template></a-input></div>
</template>

案例：前缀后缀属性

核心：

prefix="￥" suffix="RMB"

<script setup>
import {ref, watch} from "vue";
import {UserOutlined, InfoCircleOutlined} from "@ant-design/icons-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"autofocusprefix="¥"suffix="RMB"/></div>
</template>