vue+elementUi发送邮件组件编写

父组件：

<email-dialog  v-if="showemailDialog" v-on:closeemailDialog="closeemailDialog" :multipleSelection="multipleSelection"></email-dialog>

子组件：

<template><div><el-dialogtitle="发送邮件":visible.sync="visible":close-on-click-modal="false":destroy-on-close="true" @close="closeemailDialog"width="500px"><div class="emailBan"><div class="x_form-field y_form-field"><div class="row"><label class="form-label light-font"><span class="required red-font">*</span>收件人</label></div><div class="row" @click="onFocus('sendemail')"><div class="email-box" ref="email-box"><el-tag :key="tag" size="mini" type="info" class="rowtag"v-for="tag in oneemailList" closable :disable-transitions="false"@close="handleClose(tag,'oneemail')">{{tag}}</el-tag><el-input class="inputbox" size="mini"  v-model="oneemail"  ref="sendIpt" id="receiptIpt":style="{width:oneiptWidth+'px'}"@keyup.enter.native="handleInputConfirm('oneemail')"  @blur="handleInputConfirm('oneemail')" ></el-input></div></div></div><div class="x_form-field y_form-field"><div class="row"><label class="form-label light-font"><span class="required red-font"></span>抄送人</label></div><div class="row" @click="onFocus('copyemail')"><div class="email-box" ref="email-box"><el-tag :key="tag" size="mini" type="info" class="rowtag"v-for="tag in twoemailList" closable :disable-transitions="false" @close="handleClose(tag,'twoemail')">{{tag}}</el-tag><el-input class="inputbox" size="mini"  v-model="twoemail"  ref="copyIpt":style="{width:twoiptWidth+'px'}"@keyup.enter.native="handleInputConfirm('twoemail')"  @blur="handleInputConfirm('twoemail')"></el-input></div></div></div></div><div slot="footer" class="dialog-footer"><el-button @click="closeemailDialog">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></div></el-dialog></div>
</template><script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import FormField from '@/components/form-field.vue';
import _ from 'lodash';
import { regCheck, formatDate } from '@/utils/time';
import { getEmailAddress, billNoticeByEmail } from '@/api/email';@Component({components: { FormField }
})
export default class EmailDialog extends Vue {private visible = true;private oneemail='';private oneemailList: Array<any>=[];private twoemail='';private twoemailList: Array<any>=[];private oneiptWidth=40;private twoiptWidth=40;@Prop({ default: {} }) private multipleSelection !: Record<string, any>;@Watch('oneemail')updateoneWidth (val: string) {this.oneiptWidth = 40 + val.length * 7;}@Watch('twoemail')updatetwoWidth (val: string) {this.twoiptWidth = 40 + val.length * 7;}mounted () {this.getemailAddress();}async getemailAddress () {const data = {orderNo: this.multipleSelection.orderNo,type: 1};const res = await getEmailAddress(data);this.oneemailList = res.sendMail;this.twoemailList = res.ccMail;}handleClose (tag: number, type: string) {if (type === 'oneemail') {this.oneemailList.splice(this.oneemailList.indexOf(tag), 1);}if (type === 'twoemail') {this.twoemailList.splice(this.twoemailList.indexOf(tag), 1);}}handleInputConfirm (type: string) {const { oneprompt, twoprompt } = { oneprompt: '邮箱已存在！', twoprompt: '邮箱格式有误！' };if (type === 'oneemail') {if (this.oneemail === '') {return false;}const email = _.trim(this.oneemail).replace(/(;$)|(；$)/g, '');const is = (n: any) => {return _.some(this.oneemailList, v => v === n);};const res = regCheck(email, 'email');if (res) {if (!is(email)) {this.oneemailList.push(email);this.oneemail = '';} else {this.oneemail = '';this.$message.warning(oneprompt);}} else {this.$message.warning(twoprompt);}}if (type === 'twoemail') {if (this.twoemail === '') {return false;}const email = _.trim(this.twoemail).replace(/(;$)|(；$)/g, '');const is = (n: any) => {return _.some(this.twoemailList, v => v === n);};const res = regCheck(email, 'email');if (res) {if (!is(email)) {this.twoemailList.push(email);this.twoemail = '';} else {this.twoemail = '';this.$message.warning(oneprompt);}} else {this.$message.warning(twoprompt);}}}isEmail (val: any) {const regEmail = /^([a-zA-Z0-9]+[_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;return regEmail.test(val);}closeemailDialog () {this.$emit('closeemailDialog');}async confirm () {if (this.oneemailList.length < 1) {this.$message.warning('收件人不得为空！');return false;}try {const sendMail = this.oneemailList.join(';');const ccMail = this.twoemailList.join(';');const date = formatDate(this.multipleSelection.billStarttime).split(' ')[0];const data = {sendMail: sendMail,ccMail: ccMail,customName: this.multipleSelection.customerName,date: date,orderNo: this.multipleSelection.orderNo};const res = await billNoticeByEmail(data);if (res) {this.$message.success('发送成功！');this.closeemailDialog();} else {this.$message.error('发送失败！');}} catch {console.log('发送失败！');}}onFocus (type: string) {if (type === 'sendemail') {(this.$refs.sendIpt as any).focus();}if (type === 'copyemail') {(this.$refs.copyIpt as any).focus();}}
}
</script><style scoped lang="scss">
.el-dialog__body{.form-field-container{.oneline-field{width:100%!important;}}
}.x_form-field {width:100%!important;display: inline-block;margin-bottom: .8rem;margin-right: 1rem;position: relative;::v-deep .el-select {width: 100%;}&.clear-margin {margin: 0;}.form-label {height: 16px;line-height: 16px;padding-bottom: 10px;font-size: 14px;text-align: left;width: 100%;display: inline-block;vertical-align: middle;box-sizing: content-box;.required{padding-right: 2px;}}.row{.email-box{display: flex;margin-top: 4px;padding:6px 0px;flex-wrap: wrap;border-radius: 5px;box-sizing: border-box;align-items: center;min-height: 40px;cursor: text;border:1px solid #606266;div.el-input.el-input--mini {height: 28px;}.rowtag{margin-left:10px;}.inputbox{width:10px;.el-input__inner{}}}.email-box--active{border-color: #268DFF!important;}}
}
</style><style lang="scss">
.y_form-field{.row{.email-box{display: flex;.inputbox{.el-input__inner{border: none!important;}}}}
}
</style>

其他常用方法：正则校验

// 时间戳格式转换
export function formatDate (datetime: string | Date) {const date = new Date(datetime);const YY = date.getFullYear() + '-';const MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';const DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());const hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';const mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';const ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());return YY + MM + DD + ' ' + hh + mm + ss;
}// 枚举转换成selsect下拉数组
export function selectList (enums: any) {let selectlist = [];for (const i in enums) {const temp = {id: i,name: enums[i]};selectlist.push(temp);}selectlist = selectlist.slice(0, selectlist.length / 2);return selectlist;
}// 通过id得到下拉数组内的name
export function getName (options: any, num: string|number) {let optname = '';options.forEach((item: any) => {if (Number(num) === item.id) {optname = item.name;}});return optname;
}// 校验
export function regCheck (val: any, type: string) {// 10位数字校验（月结卡号）if (type === 'cardnum') {const reg = /^\d{10}$/;return reg.test(val);}// 11位手机号校验if (type === 'phone') {const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;return reg.test(val);}// 电子邮箱校验if (type === 'email') {const reg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,5})$/;return reg.test(val);}// 数字及两位小数校验if (type === 'number') {const reg = /^-*\d+(\.\d{1,2})?$/;return reg.test(val);}// 数字和字母的组合---（限20位）--(例如：客户编码,合同编码)if (type === 'code') {const reg = /^[A-Za-z0-9]{1,20}$/;return reg.test(val);}// 数字和字母的组合---（限50位）--(例如：货主代码)if (type === 'code_two') {const reg = /^[A-Za-z0-9]{1,50}$/;return reg.test(val);}// 纯数字---(例如：商机编码)if (type === 'purenum') {const reg = /^[0-9]*$/;return reg.test(val);}return true;
}// 字数限制
export function strNumber (val: string, num: number|string) {if (val.length > num) {return false;}return true;
}// 时间大小判断---后者不能大于前者
export function timeJudeg (startTime: any, endTime: any) {if (typeof startTime === 'string') {startTime = new Date(startTime);}if (typeof endTime === 'string') {endTime = new Date(endTime);}startTime = startTime.getTime();endTime = endTime.getTime();if (startTime > endTime) {return false;}return true;
}// 当前日期获取---默认当前日期
export function getNowTime () {const now = new Date();const year = now.getFullYear(); // 得到年份let month: any = now.getMonth(); // 得到月份let date: any = now.getDate(); // 得到日期month = month + 1;month = month.toString().padStart(2, '0');date = date.toString().padStart(2, '0');const defaultDate = `${year}-${month}-${date} 00:00:00`;return defaultDate;
}

效果图：

vue+elementUi发送邮件组件编写相关推荐

用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
element-ui分页组件: 以下代码都是干货,欢迎大家互相评论学习方法一数据绑在div上: <template> <div><div v-for="(v ...
Web前端-Vue ElementUI el-input组件绑定点击事件
1.element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"&g ...
vue + elementUI导航组件NavMenu + vue-router实现点击在新的选项卡打开界面
系统文件构成目录: 其中Index.vue是主页.核心源码如下: <div class="menu"><slider-menu ...
vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
vue+elementui Table组件splice删除表格总是删除最后一行
原因是没有给table下面的row加key,才导致的问题解决方法: 在 el-table 标签里加一个 row-key 属性 <el-table :data="tableData& ...
vue elementui table组件内容换行
如表格使用render-header内容过多使用"\n 或 <br/>"换行无效 render-header 列标题 Label 区域渲染使用的 Function w ...
WTM框架使用技巧之：Layui版本嫁接Vue+ElementUI
快点关注我们吧作者介绍庄星睿,现就职于海运物流行业,威海新海丰物流有限公司,IT技术兼管理职务. 从事过winform,wpf技术开发,自2019年接触wtm框架后,热衷使用wtm框架开发物流公司 ...
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...

vue+elementUi发送邮件组件编写

vue+elementUi发送邮件组件编写相关推荐

最新文章

热门文章