input输入框的前缀和后缀

案例:前缀插槽

核心:

html 复制代码
<template #prefix>
  <user-outlined />
</template>
html 复制代码
<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>

案例:后缀插槽

核心:

html 复制代码
<template #suffix>
  <a-tooltip title="Extra information">
    <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
  </a-tooltip>
</template>
html 复制代码
<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>

案例:前缀后缀属性

核心:

html 复制代码
prefix="¥" suffix="RMB"
html 复制代码
<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
             prefix="¥"
             suffix="RMB"
    />
  </div>
</template>
相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休6 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪6 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do6 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选6 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——6 小时前
前端登录鉴权详解
前端·javascript
李姆斯6 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理