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>
相关推荐
OpenGL2 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0218 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang19 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景21 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼22 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿24 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再26 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55530 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录35 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000036 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试