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>
相关推荐
试图让你心动9 分钟前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_12 分钟前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码35 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记36 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏43 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏3 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端