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>
相关推荐
秋天的一阵风几秒前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风1 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺21 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺22 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码22 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou23 分钟前
组件测试
前端
JustHappy26 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可40 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端