Vue+ElementUI中的input输入框添加自定义图片

ElementUI中input添加输入框通过prefix-icon和suffix-icon来设置就可以。

自定义图片添加方法如下：

1. 效果图

2. 代码实现

第一部分

<el-form ref="formData" :model="formData" label-width="80px" style="padding-top: 70px;" class="loginForm"><el-form-item><el-input class="username" type="text" v-model="formData.USERNAME" autocomplete="off" placeholder="请输入用户名" /></el-form-item><el-form-item><el-input class="password" type="text" v-model="formData.PASSWORD" autocomplete="off" placeholder="请输入密码" /></el-form-item>
</el-form>

第二部分

.username .el-input__inner{background:url(@/assets/images/icon-username.png) no-repeat 10px center;  padding: 0px 50px; /*输入内容左右边距控制*/width: 534px;height: 66px;font-size: 23px;color: #dadada;
}
.password .el-input__inner{background:url(@/assets/images/icon-password.png) no-repeat 10px center;padding: 0px 50px;width: 534px;height: 66px;font-size: 23px;color: #dadada;
}

Vue+ElementUI中的input输入框添加自定义图片相关推荐

Vue+ElementUI 之 input输入框添加自定义图片
Vue+ElementUI 之 input输入框添加自定义图片效果图如图: <el-form ref="formData" :model="formData&q ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
vue+elementUI中使用Echarts （懒人无脑版）
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版) 前言一.Echarts 1.提供一个Echarts 网站随去随用 http://img.9cfcf.com/#tp- ...
vue+elementui中使用echarts给柱形图添加背景色
vue+elementui中使用echarts给柱形图添加背景色首先使用npm安装echarts npm install echarts --save //or(或者使用) cnpm install ...
HTML中限制input 输入框输入内容
HTML中限制input 输入框输入内容先介绍使用 oninput 事件,限制HTML中input 输入框输入内容的方式,再介绍用其它方式限制HTML中input 输入框输入内容. 只能输入纯数字的 ...
vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...

Vue+ElementUI中的input输入框添加自定义图片

Vue+ElementUI中的input输入框添加自定义图片相关推荐

最新文章

热门文章