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>
相关推荐
前端码虫1 小时前
JS分支和循环
开发语言·前端·javascript
GISer_Jing1 小时前
MonitorSDK_性能监控(从Web Vital性能指标、PerformanceObserver API和具体代码实现)
开发语言·前端·javascript
fanged1 小时前
Angularjs-Hello
前端·javascript·angular.js
岸边的风1 小时前
JavaScript篇:JS事件冒泡:别让点击事件‘传染’!
开发语言·前端·javascript
前端大卫2 小时前
Vue3 里的 h 函数的运用场景!
前端·vue.js
慌糖3 小时前
Vue组件化
前端·javascript·vue.js
blues_C4 小时前
十一、【核心功能篇】测试用例管理:设计用例新增&编辑界面
前端·vue.js·测试用例·element plus·测试平台
前端snow4 小时前
用cursor写一个微信小程序-购物网站实操
前端·javascript·后端
书语时4 小时前
ES6 深克隆与浅克隆详解:原理、实现与应用场景
前端·javascript·es6
Y学院4 小时前
Vue 技术文档
vue.js·笔记·学习