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>
相关推荐
毎天要喝八杯水27 分钟前
搭建vue前端后端环境
前端·javascript·vue.js
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
摘星编程2 小时前
OpenHarmony环境下React Native:Tooltip自动定位
javascript·react native·react.js
穿过锁扣的风2 小时前
如何操作HTML网页
前端·javascript·html
2601_949833393 小时前
flutter_for_openharmony口腔护理app实战+知识实现
android·javascript·flutter
东东5163 小时前
果园预售系统的设计与实现spingboot+vue
前端·javascript·vue.js·spring boot·个人开发
起风的蛋挞3 小时前
Matlab提示词语法
前端·javascript·matlab
怪兽毕设4 小时前
基于SpringBoot的选课调查系统
java·vue.js·spring boot·后端·node.js·选课调查系统
Amumu121384 小时前
Vue Router(一)
前端·javascript·vue.js
2603_949462104 小时前
Flutter for OpenHarmony 社团管理App实战 - 资产管理实现
开发语言·javascript·flutter