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>
相关推荐
德育处主任Pro6 分钟前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
叫我一声阿雷吧1 小时前
JS 入门通关手册(23):JS 异步编程:回调函数与异步本质
javascript·es6·前端面试·回调函数·回调地狱·js异步编程·异步本质
zayzy1 小时前
前端八股总结
开发语言·前端·javascript
今天减肥吗1 小时前
前端面试题
开发语言·前端·javascript
小J听不清2 小时前
CSS 外边距(margin)全解析:取值规则 + 实战用法
前端·javascript·css·html·css3
前端小超超2 小时前
Vue计算属性computed:可写与只读的区别
前端·javascript·vue.js
爱学习的程序媛3 小时前
【Web前端】Pinia状态管理详解
前端·vue.js·typescript
java1234_小锋3 小时前
分享一套优质的SpringBoot+Vue咖啡商城系统
vue.js·spring boot·咖啡商城
小J听不清4 小时前
CSS 边框(border)全解析:样式 / 宽度 / 颜色 / 方向取值
前端·javascript·css·html·css3
用户336566342174 小时前
Vue3+Vite项目极致性能优化:从构建到运行全链路实战指南
vue.js