vue3中 input 中放大镜在后面

复制代码
npm install element-plus --save

<template>
  <el-input
    placeholder="请输入内容"
    v-model="input"
    prefix-icon="el-icon-search"
  ></el-input>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus';
import 'element-plus/dist/index.css';
 
const input = ref('');
</script>

或者

<template>
  <el-input
    placeholder="请输入内容"
    v-model="input"
    prefix-icon="Search"
  ></el-input>
</template>

方法2:使用自定义插槽(slot)

复制代码
<template>
  <el-input placeholder="请输入内容" v-model="input">
    <template #prefix>
      <i class="el-icon-search"></i>
    </template>
  </el-input>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus';
import 'element-plus/dist/index.css';
 
const input = ref('');
</script>
相关推荐
无羡仙42 分钟前
从零构建 Vue 弹窗组件
前端·vue.js
源心锁2 小时前
👋 手搓 gzip 实现的文件分块压缩上传
前端·javascript
phltxy3 小时前
从零入门JavaScript:基础语法全解析
开发语言·javascript
Kagol3 小时前
JavaScript 中的 sort 排序问题
前端·javascript
计算机毕设VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue动物园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
北辰alk4 小时前
深入理解Vue数据流:单向与双向的哲学博弈
vue.js
cos4 小时前
Fork 主题如何更新?基于 Ink 构建主题更新 CLI 工具
前端·javascript·git
北辰alk5 小时前
解决Vue打包后静态资源图片失效的终极指南
vue.js
摸鱼的春哥5 小时前
AI编排实战:用 n8n + DeepSeek + Groq 打造全自动视频洗稿流水线
前端·javascript·后端
Coder_Boy_6 小时前
基于SpringAI的在线考试系统设计总案-知识点管理模块详细设计
android·java·javascript