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>
相关推荐
cos2 小时前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
剪刀石头布啊2 小时前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊2 小时前
js常见的单例
前端·javascript
剪刀石头布啊2 小时前
iframe通信、跨标签通信的常见方案
前端·javascript·html
阿星做前端3 小时前
如何构建一个自己的 Node.js 模块解析器:node:module 钩子详解
前端·javascript·node.js
上单带刀不带妹3 小时前
JavaScript 中的宏任务与微任务
开发语言·前端·javascript·ecmascript·宏任务·微任务
zwjapple4 小时前
Next.js 中使用 MongoDB 完整指南
开发语言·javascript·mongodb
像素之间4 小时前
elementui中rules的validator 用法
前端·javascript·elementui
小高0075 小时前
🚀把 async/await 拆成 4 块乐高!面试官当场鼓掌👏
前端·javascript·面试
2401_837088505 小时前
AJAX快速入门 - 四个核心步骤
前端·javascript·ajax