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>
相关推荐
慕斯fuafua2 分钟前
JS——DOM操作
前端·javascript·html
GISer_Jing5 分钟前
深入解析 Three.js:从架构设计到 WebGPU 渲染革命
javascript·信息可视化·webgl
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
放下华子我只抽RuiKe512 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
XinZong12 小时前
OpenClaw 实现双重心跳(Heartbeat)+ clawreach虾聊项目实现
javascript
还有多久拿退休金14 小时前
一张栈的图,治好你面试答不出 script 阻塞的病
前端·javascript
zithern_juejin14 小时前
原型与原型链
javascript
还有多久拿退休金16 小时前
我用 Three.js 造了个 3D 漫步世界,角色走路像喝醉了——以及我是怎么修好的
前端·vue.js
LJA6484416 小时前
为什么 AI 时代更需要配置化组件库
vue.js
008爬虫实战录17 小时前
【码上爬】 题十二:如来神掌 困难, JSVMP加密,使用代理补环境
前端·javascript·node.js