vue+elementUi发送邮件组件编写
⽗组件：
<email-dialog  v-if="showemailDialog" v-on:closeemailDialog="closeemailDialog" :multipleSelection="multipleSelection"></email-dialog>⼦组件：
<template>
<div>
<el-dialog
title="发送邮件"
: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"
:
@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"
:
@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) {
}
@Watch('twoemail')
updatetwoWidth (val: string) {
this.twoiptWidth = 40 + val.length * 7;
}
mounted () {
}
async getemailAddress () {
const data = {
orderNo: derNo,
type: 1
};
const res = await getEmailAddress(data);
this.twoemailList = Mail;
}
handleClose (tag: number, type: string) {
if (type === 'oneemail') {
}
if (type === 'twoemail') {
this.twoemailList.splice(this.twoemailList.indexOf(tag), 1);
}
}
handleInputConfirm (type: string) {
const { oneprompt, twoprompt } = { oneprompt: '邮箱已存在！', twoprompt: '邮箱格式有误！' };
if (type === 'oneemail') {
if (ail === '') {
return false;
}
const email = _.ail).replace(/(;$)|(；$)/g, '');
const email = _.ail).replace(/(;$)|(；$)/g, '');
const is = (n: any) => {
return _.ailList, v => v === n);
};
const res = regCheck(email, 'email');
if (res) {
if (!is(email)) {
} else {
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,}$/;    st(val);
}
closeemailDialog () {
this.$emit('closeemailDialog');
}
async confirm () {
if (ailList.length < 1) {
this.$message.warning('收件⼈不得为空！');
return false;
}
try {
const sendMail = ailList.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: derNo
orderNo: derNo      };
const res = await billNoticeByEmail(data);      if (res) {
this.$message.success('发送成功！');        this.closeemailDialog();
} else {
this.$('发送失败！');
}
} catch {
console.log('发送失败！');
}
}
onFocus (type: string) {
if (type === 'sendemail') {
(this.$refs.sendIpt as any).focus();
}
if (type === 'copyemail') {
(this.$pyIpt 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;
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 = FullYear() + '-';
const MM = (Month() + 1 < 10 ? '0' + (Month() + 1) : Month() + 1) + '-';  const DD = (Date() < 10 ? '0' + (Date()) : Date());
const hh = (Hours() < 10 ? '0' + Hours() : Hours()) + ':';
const mm = (Minutes() < 10 ? '0' + Minutes() : Minutes()) + ':';
const ss = (Seconds() < 10 ? '0' + Seconds() : Seconds());
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]
borderbox};
selectlist.push(temp);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。