热门标签
热门文章
- 1定制elementPlus主题_element plus自定义主题
- 2Maven私有仓库搭建与使用【nexus的配置与使用】【Windows】_nexus搭建maven私有仓库教程
- 3ES集群搭建
- 4WSL安装cuda（11.8）
- 5Air系列模块常见问题列表_at+medcr
- 6关于太阳黑子数的查询_太阳黑子数据查询
- 7set赋值的时候报空指针Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exceptio_dispatcherservlet 空指针
- 8Chrome浏览器命令行启动参数_chrome 命令行启动参数怎么设置
- 9UGUI六大组件之EventSystem和Standalone Input Module_ugui eventsystem 模拟事件
- 10Opscenter用户手册
当前位置: article > 正文
在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)_
作者：从前慢现在也慢 | 2024-02-20 22:48:51
赞
踩
前言
官方文档
在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。如下图：
1、vue2中使用
在input中使用属性添加
<div class="demo-input-suffix">
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: ''
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
对没有prefix-icon和suffix-icon属性的标签如：el-select，使用slot方式添加
<div class="demo-input-suffix">
<el-input
placeholder="请选择日期"
v-model="input1">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input2">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: ''
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
<template slot="menuLeft">
<el-select v-model="deviceDataId" filterable size="small" @visible-change="deviceVisibleChange" @change="deviceSelectChange" placeholder="请选择设备生成图表">
<template slot="prefix">
<span style="padding: 5px;line-height: 33px;font-size: 18px; color: #409eff;">
<i class="el-icon-s-data"></i>
</span>
</template>
<el-option v-for="item in devOptions"
:key="item.deviceId"
:label="item.deviceName"
:value="item.deviceId">
</el-option>
</el-select>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2、vue3+element-plus中使用
<el-input v-model.trim="forms.username" v-focus :placeholder="translateTitle('请输入用户名')" tabindex="1" type="text">
<template #prefix>
<el-icon :size="size">
<User />
</el-icon>
</template>
<template #suffix>
<el-icon :size="size" @click="handlePassword">
<View />
</el-icon>
</template>
</el-input>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/121082
推荐阅读
- 第一步：引入element-ui的分页器
[详细] -->赞
踩
相关标签
