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

效果图如图：

<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{/*no-repeat:图片不重复；10px：控制图片左边距 center：图片上下居中*/background:url(../img/user.png) no-repeat 10px center;  padding: 0px 50px; /*输入内容左右边距控制*/width: 534px;height: 66px;font-size: 23px;color: #dadada;
}
.password .el-input__inner{background:url(../img/pass.png) no-repeat 10px center;padding: 0px 50px;width: 534px;height: 66px;font-size: 23px;color: #dadada;
}

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

vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...
vue中，input输入框只允许输入数字
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,以供大家参考这里需用到vue修饰符不了解的同学可去vue官网看看,或者百度看看其他文档的讲解. .number 如果想自动将用户的 ...
Vue+Element ui input输入框，扫码枪触发 enter事件，多次快速扫描会出现字符丢失的问题（已解决）
input输入框,扫码枪触发 enter事件,多次快速扫描第二次字符会丢失修改之前代码: 在接口返回过来值之后,将input框值清空掉这样写用键盘enter键快速触发多次,也不会有任何问题,但是 ...
Vue组件封装 ——input 输入框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字 <script> export def ...
jquery和vue分别对input输入框手机号码格式化（344）
需求是这样的,输入手机号码的时候要三位三位四位的格式我在网上找了几个方法都是有问题的,有的是输入可以实现,删除的时候不好用,有的是输入后删除到只留三位的位置时再接着输入就没有空格了,所以自己写了个函 ...
vue2.0_在vue中实现input输入框的模糊查询
前言我们要实现的一个效果是,当输入框输入值时,显示数据列表框并将检索到的数据在列表框当中做展示. 模糊查询功能原理分析其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询,也就是说用 ...
vue+element-ui 动态加载本地图片
最近用element-ui实现图片展示时,发先本地的图片加载不了,一开始是这么写的 <el-imageclass="table-td-thumb":src="'.. ...
vue+elementui使用vuedraggable插件实现图片文件拖拽排序
安装 npm install vuedraggable 引入 import vuedraggable from 'vuedraggable' 写成组件 <template><div ...

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

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

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

最新文章

热门文章

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

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

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

最新文章

热门文章

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

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

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