点击输入文本框时自动提示邮箱后缀（vue项目）

效果图：

双向绑定 inputEmail,如果没使用element框架，把有 el- 的自己替换回来

          <el-input v-model="inputEmail" placeholder="请输入邮箱账号" clearable prefix-icon="el-icon-user"></el-input><div class="hintBox"><div @click="setInput(mail)" class="hintItem"  v-for="mail in emails" :key="mail">{{mail}}</div></div>

export default {name: 'login',data () {return {inputEmail: ''}},methods: {// 点击该邮箱后缀是补全文本框setInput (mail) {this.inputEmail = mail}},computed: {emails () {// 如果inputEmail中没有任何东西，则不处理if (!this.inputEmail) return []// 考虑到用户自己要输@符号，如果@符号首次出现的位置大于等于第零个位置时，则不处理if (this.inputEmail.indexOf('@') > -1) return []return [this.inputEmail + '@163.com',this.inputEmail + '@126.com',this.inputEmail + '@0355.net',this.inputEmail + '@263.net',this.inputEmail + '@3721.net',this.inputEmail + '@qq.com',this.inputEmail + '@yahoo.com',this.inputEmail + '@gmail.com',this.inputEmail + '@msn.com',this.inputEmail + '@hotmail.com',this.inputEmail + '@aol.com',this.inputEmail + '@ask.com',this.inputEmail + '@live.com',this.inputEmail + '@yeah.net']}}
}

简单的css样式，仅供参考

  .hintBox {width: 100%;max-height: 120px;overflow-y:scroll;overflow-x: auto;position: absolute;z-index: 999;background-color: #fff;}.hintItem {margin-top: 2px;cursor:pointer;margin-left: 45px;font-size: 13px;color: #898989;}

点击输入文本框时自动提示邮箱后缀（vue项目）相关推荐

php 智能输入提示插件,phph 输入邮箱时自动提示邮箱后缀实现代码
1.在html中输入邮箱的input要有自己的class,以及自己父元素的class.例如: // 初始化 $(function() { new EmailAutoComplete({ parentC ...
输入邮箱时自动提示邮箱后缀
如题所示: 在html中输入邮箱的input要有自己的class,以及自己父元素的class.例如: <div class="parentemail"><inpu ...
去掉文本框的自动提示
最近写个模糊查询的自动提示的功能,可是VS自带的文本框能记住以前填写过的东西,很是烦人,最后找到解决办法 html控件 : 将input元素的autocomplete属性设置为off可以关闭自动提示 ...
禁止backspace键(退格键)，但输入文本框时不禁止（兼容IE）
Ext实现方式: Ext.getDoc().on('keydown',function(e){ if(e.getKey() == 8 && e.getTarget().typ ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
一.前言这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发 ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法...
这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发有点像,渐 ...
javascript弹出浏览器的三种提示框：提示信息框、确认框、输入文本框
浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框效果: 实现代码: <script>alert( ...
JavaScript实现弹出浏览器的三种提示框：提示信息框、确认框和输入文本框
浏览器的三种提示框 1.alert()提示信息框 2.confirm()提示确认框 3.prompt()提示输入文本框 1.alert()提示信息框效果图: 实现代码: <script> ...
HTML-input文本框（添加提示文字，填写内容时消失）
input文本框内添加提示文字,填写内容时消失: 用placeholder属性作为提示语 <input placeholder="提示语..."></input& ...
java如何设置文本框提示_[Java教程]一个友好的文本框内显示提示语 jquery 插件
[Java教程]一个友好的文本框内显示提示语 jquery 插件 0 2014-08-08 18:01:25 插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失. 如果没有输入或输入为空则失 ...

点击输入文本框时自动提示邮箱后缀（vue项目）

点击输入文本框时自动提示邮箱后缀（vue项目）相关推荐

最新文章

热门文章