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>
相关推荐
~无忧花开~15 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D22 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠30 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman37 分钟前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼40 分钟前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉44 分钟前
第十二周 waf绕过和前端加密绕过
前端
Asort44 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee1 小时前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼1 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript