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>
相关推荐
hfd199034 分钟前
JavaScript 性能优化实战技术文章大纲
开发语言·javascript·性能优化
Hejjon37 分钟前
React 封装命令式弹窗
前端·javascript·react.js
前端小巷子3 小时前
Vue 3 运行机制
前端·vue.js·面试
yzzzzzzzzzzzzzzzzz9 小时前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
再学一点就睡10 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友11 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
shix .13 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
烛阴13 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
秉承初心14 小时前
Node.js 开发 JavaScript SDK 包的完整指南(AI)
开发语言·javascript·node.js
芜青18 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax