南通高端网站建设公司/百度一下百度首页官网

一、邮件发送
需求不难，传指定的参数给后端，调接口就直接发送了
就是参数里有个正文部分，一定要用h5写

写vue写习惯了，原生的都快忘光了，走了些弯路

二、h5
在页面上有个邮件发送的按钮，点击按钮打开弹窗，是一个仿邮箱发送的界面，类似如下：

红圈圈起来的部分都要用h5写
也就是说在vue这个单文件里，模板区可以正常用element画，但是给后端的得是h5

我自己是保持一致，两边都是一样的，也方便直接复用

三、模板字符串的处理

正文里有个表格，这个也不难画，div排列布局就可以了
主要说的是如何循环处理数据，以及input如何绑值，以及拼接

在确认发送这个按钮里处理数据
先定义个变量，用来处理循环出来的字符串，数组可以是后端给的 ，也可以是自己定义的，我这里因为表格的字段名都是固定的，所以我写死了，可以参考下，因为列表是一行四格，即a，a的值，b，b的值

模板字符串里有${}包裹的才是变量，不然都是字段串
所以要这样写才行 ${item.leftname}

    this.emailTable = [{leftname: 'A字段',rightname: 'B字段',leftValue: this.form.A,rightValue: this.form.B,},{leftname: 'C字段',rightname: 'D字段',leftValue: this.form.C,rightValue: this.form.D,},]var info = ''this.emailTable.forEach(function (item) {info += ` <div style="display: flex"><divstyle="height: 30px;width: 140px;line-height: 30px;border-right: 1px solid #333;border-bottom: 1px solid #333;border-left: 1px solid #333;"><span style="padding-left: 5px">${item.leftname}</span></div><div style="height: 30px; line-height: 30px; border-right: 1px solid #333; border-bottom: 1px solid #333"><inputtype="text"value="${item.leftValue}"style="width: 140px; border: none; outline: none; font-size: 18px; font-weight: 500"autocomplete="off"/></div><div style="height: 30px; width: 140px; line-height: 30px; border-right: 1px solid #333; border-bottom: 1px solid #333"><span style="padding-left: 5px">${item.rightname}</span></div><div style="height: 30px; line-height: 30px; border-bottom: 1px solid #333; border-right: 1px solid #333"><inputtype="text"value="${item.rightValue}"style="width: 280px; border: none; outline: none; font-size: 18px; font-weight: 500"autocomplete="off"/></div></div>`})

不管有多少要循环处理的数据，都像上面这个格式来就行
然后定义一个变量，将全部的内容以模板字符串的格式处理

  let body = ` <div ><p><span style="font-size: 18px; font-weight: 500">Dear</span><inputtype="text"id="nickName"value="${this.form.nickname}"style="border: none; outline: none; font-size: 18px; font-weight: 500"autocomplete="off"/></p><p style="font-size: 18px; font-weight: 500">tks</p><div style="color: #333; width: 700px"><div style="height: 30px; text-align: center; line-height: 30px; border: 1px solid #333"><span style="font-size: 20px; font-weight: 700">Loading</span></div><div style="height: 30px; text-align: left; line-height: 30px; border: 1px solid #333; border-top: none"><span style="padding-left: 5px">To:</span></div>${info}                                                <div style="display: flex">${containHead}</div>           ${containBody}</div><p style="font-size: 18px; font-weight: 500">Thank you very much!</p>       </div>`

然后将body作为参数传到接口里，参数格式会是下面这样

然后邮件里收到的内容，如下：