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>
相关推荐
To_OC5 小时前
LC 994 腐烂的橘子:人人都说是 BFS 入门题,我却写了三遍才过
javascript·算法·leetcode
如果超人不会飞9 小时前
脉络清晰的业务演进:TinyVue Timeline 时间线组件全方位实战指南
vue.js
如果超人不会飞9 小时前
从扁平到立体:掌握 TinyVue Grid 树形表格的高级实战指南
vue.js
To_OC11 小时前
LC 200 岛屿数量:经典 DFS 入门题,我第一次写居然连方向都搞错了
javascript·算法·leetcode
用户21366100357212 小时前
Vue2组件化开发与父子通信
前端·vue.js
用户21366100357213 小时前
Vue2事件系统与指令进阶
前端·vue.js
labixiong13 小时前
实现一个能跑的迷你版Promise(一)
前端·javascript·面试
逸铭16 小时前
Day 5:三栏布局——左账号 / 中聊天 / 右工具
vue.js·electron
用户17335980753717 小时前
Vue 3 SPA 首屏优化:从 3s 到 1.2s 的 5 个实践
前端·vue.js
weedsfly17 小时前
还在用 Axios?你可能需要重新理解 XHR 与 Fetch
前端·javascript·面试