封装一个全局邮箱提示后缀的组件

一、在components新建mailbox.vue

<template>

<div>

<el-form class="mailbox" :rules="rules" ref="form" :model="form">

<el-form-item prop="inputEmail">

<el-input

v-model="form.inputEmail"

placeholder="请输入邮箱账号"

clearable

prefix-icon="el-icon-user"

></el-input>

</el-form-item>

<div class="hintBox">

<div

@click="setInput(mail)"

class="hintItem"

v-for="mail in emails"

:key="mail"

>

{{ mail }}

</div>

</div>

</el-form>

</div>

</template>

<script>

export default {

data() {

return {

form:{

inputEmail: "",

},

rules: {

inputEmail: [

{ required: true, message: "请输入正确的邮箱", trigger: "blur" },

],}

};

},

created() {},

computed: {

emails() {

// 如果inputEmail中没有任何东西，则不处理

if (!this.form.inputEmail) return [];

// 考虑到用户自己要输@符号，如果@符号首次出现的位置大于等于第零个位置时，则不处理

if (this.form.inputEmail.indexOf("@") > -1) return [];

return [

this.form.inputEmail + "@163.com",

this.form.inputEmail + "@126.com",

this.form.inputEmail + "@0355.net",

this.form.inputEmail + "@263.net",

this.form.inputEmail + "@3721.net",

this.form.inputEmail + "@qq.com",

this.form.inputEmail + "@yahoo.com",

this.form.inputEmail + "@gmail.com",

this.form.inputEmail + "@msn.com",

this.form.inputEmail + "@hotmail.com",

this.form.inputEmail + "@aol.com",

this.form.inputEmail + "@ask.com",

this.form.inputEmail + "@live.com",

this.form.inputEmail + "@yeah.net",

];

},

},

methods: {

// 点击该邮箱后缀是补全文本框

setInput(mail) {

this.form.inputEmail = mail;

this.$emit("MailboxDelivery",this.form.inputEmail);

},

},

};

</script>

<style scoped>

.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: 30px;

font-size: 13px;

color: #898989;

}

.el-form-item {

margin: 0;

}

</style>

二、注册全局

import mailbox from './components/mailbox.vue'

Vue.component('mailbox', mailbox)

三、局部直接使用

<mailbox @MailboxDelivery="MailboxDelivery"></mailbox>

MailboxDelivery(val){

this.form.email = val

},

注：需要子传父，接收到后赋值

封装一个全局邮箱提示后缀的组件相关推荐

封装一个全局使用的二次确认弹窗
背景: 如图所示,在项目中进行删除.取消.停用等等操作的时候,出于考虑误操作等,我们通常会需要用户进行二次确认,然后再进行操作.对于这种使用比较多的公共功能,我们如何才能保持一致并且简单的使用呢?出于 ...
关于Android封装一个全局的BaseActivity你需要知道的
关于Android封装一个全局的BaseActivity你需要知道的 1.前言 2.特点 3.代码及说明 3.1.优缺点 3.2.代码 3.3.注意点 4.总结 5.最后 1.前言对于一个Andro ...
如何通过一台 iPhone 申请一个 icloud 邮箱账号后缀为 @icloud.com
总目录 iOS开发笔记目录从一无所知到入门文章目录需求关键步骤步骤后续需求在 iPhone 自带的邮箱软件中添加账号,排第一位的是 iCloud 邮箱: 选 iCloud 之后: 提示 ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值简化了渲染的子组 ...
微信小程序，分享如何封装一个全局支持暂停，拖动等各类操作的音视频等多媒体管理器
不知不觉埋头于业务已许久,距离上一篇分享应该很久很久以前,具体何时,已无从知晓.慢慢的开始觉得锅有点热,感觉呼吸有点困难,温水里面的青蛙趁着腿还没完全麻木的时候,也想着开始重拾旧梦,稍微往上蹬蹬,好了 ...
vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)
这是一个自己封装的组件市面上还有其他组件: vue-qr :这个可以给二维码中间加图片本次封装组件的实例图如下: 下载qrcodde npm i qrcode -S 下载复制的插件 npm i v ...
手把手教你封装一个ant design的审核框组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识这边先上代码然后我们逐个解释 import React, { Component, Fragment } from 'r ...
vue+element封装一个填写和校验ip地址的组件
输入ip地址,输完自己切换到一下输入框,校验IP的准确性. 组件样式如下图使用方法 <template><IpAddress v-model="deviceIPAddre ...
封装一个丝滑的聊天框组件
需求背景应公司业务要求,需要做个聊天机器人,要适应不同的业务场景,大概就跟淘宝客服类似,发送消息,机器人自动回复. 话不多说,直接开撸技术栈: react(hooks写法) + flex布局功能 ...

封装一个全局邮箱提示后缀的组件

封装一个全局邮箱提示后缀的组件相关推荐

最新文章

热门文章