feat:邮件验证正则修改，背景突兀感减弱，点击遮罩不关闭

src/components/email/Email.vue

@@ -9,14 +9,17 @@
     element-loading-text="正在发送邮件..."
     element-loading-spinner="el-icon-loading"
     :before-close="handleDrawClose"
+    :wrapperClosable="false"
+    class="email-drawer"
   >
+    <template  v-if="drawObj.show">
     <div class="email-container">
       <div class="email-content">
         <el-form
           ref="emailForm"
           :model="emailForm"
           :rules="emailForm.rules"
-          label-width="80px"
+          label-width="60px"
         >
           <el-form-item label="标题" prop="title">
             <el-input placeholder="标题" v-model="emailForm.title" clearable>
@@ -48,6 +51,7 @@
         <p>1432448610@qq.com</p>
       </div>
     </div>
+    </template>
   </el-drawer>
 </template>
 <script>
@@ -90,7 +94,7 @@ export default {
                 if (value) {
                   //  验证邮箱
                   let patter =
-                    /^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/;
+                    /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                   let testEmail = patter.test(value);
                   if (!testEmail) {
                     return Promise.reject("邮箱格式有误");
@@ -118,6 +122,9 @@ export default {
     handleDrawClose() {
       const that = this;
       that.drawObj.show = false;
+      that.emailForm.title = "";
+      that.emailForm.email = "";
+      that.emailForm.content = "";
     },
     //  发送消息
     sendEmail(formName) {
@@ -172,7 +179,25 @@ export default {
 };
 </script>
 <style>
+.el-drawer__open .el-drawer.rtl {
+  background: rgba(212, 190, 180, 1); /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to left,
+    rgba(212, 190, 180, 1),
+    rgba(255, 255, 255, 1)
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to left,
+    rgba(212, 190, 180, 1),
+    rgba(255, 255, 255, 1)
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  /*overflow: hidden;*/
+}
+.el-drawer__body {
+  overflow: hidden;
+}
 .email-container {
+  padding:10px;
 }
 .email-content {
   margin: 10px;