✨ feat: 新增邮箱输入框模块

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-06 15:20:47
+ * @FilePath: /data-table/src/components/EmailField/index.vue
+ * @Description: 单行文本输入框
+-->
+<template>
+  <div class="text-field-page">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" :name="item.name" type="email" :placeholder="item.placeholder" :rules="rules"
+      :required="item.required" clearable />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+});
+
+const pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
+const rules = [{ pattern, message: '请输入正确内容邮箱' }]
+</script>
+
+<style lang="less" scoped>
+  .text-field-page {
+    .label {
+      padding: 1rem 1rem 0 1rem;
+      font-size: 0.9rem;
+      font-weight: bold;
+      span {
+        color: red;
+      }
+    }
+  }
+</style>

@@ -9,6 +9,7 @@ import AreaPickerField from '@/components/AreaPickerField/index.vue'
 import DatePickerField from '@/components/DatePickerField/index.vue'
 import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
+import EmailField from '@/components/EmailField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -22,6 +23,7 @@ import PhoneField from '@/components/PhoneField/index.vue'
  * @type date_picker 日期选择器 DatePickerField
  * @type image_uploader 图片上传 ImageUploaderField
  * @type phone 手机输入框 PhoneField
+ * @type email 邮箱输入框 EmailField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -69,5 +71,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = PhoneField;
     }
+    if (item.component_props.name === 'email') {
+      item.name = item.key;
+      item.component = EmailField;
+    }
   })
 }

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-06 15:05:23
+ * @LastEditTime: 2022-09-06 15:24:52
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -32,28 +32,40 @@ const mockData = ref([]);
 onMounted(() => {
   table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
   table_title.value = '这是一个表单的描述'
-  mockData.value = [{
-    key: 'phone',
-    value: '',
-    label: '手机号',
-    placeholder: '请输入手机号',
-    component: '',
-    component_props: {
-      name: 'phone'
-    },
-    required: true,
-  },
+  mockData.value = [
   // {
-  //   key: 'username',
-  //   value: 'test',
-  //   label: '用户名',
-  //   placeholder: '请输入用户名',
+  //   key: 'phone',
+  //   value: '',
+  //   label: '手机号',
+  //   placeholder: '请输入手机号',
   //   component: '',
   //   component_props: {
-  //     name: 'text'
+  //     name: 'phone'
   //   },
   //   required: true,
   // },
+  {
+    key: 'username',
+    value: 'test',
+    label: '用户名',
+    placeholder: '请输入用户名',
+    component: '',
+    component_props: {
+      name: 'text'
+    },
+    required: true,
+  },
+  {
+    key: 'email',
+    value: '',
+    label: '邮箱',
+    placeholder: '请输入邮箱',
+    component: '',
+    component_props: {
+      name: 'email'
+    },
+    required: true,
+  },
   // {
   //   key: 'age',
   //   value: '',
@@ -125,16 +137,16 @@ onMounted(() => {
   //   ],
   //   required: true,
   // },
-  // {
-  //   key: 'city',
-  //   value: '天津市/天津市/和平区',
-  //   city_code: '120101',
-  //   label: '省市区',
-  //   placeholder: '请选择省市区',
-  //   component_props: {
-  //     name: 'area_picker'
-  //   },
-  // },
+  {
+    key: 'city',
+    value: '天津市/天津市/和平区',
+    city_code: '120101',
+    label: '省市区',
+    placeholder: '请选择省市区',
+    component_props: {
+      name: 'area_picker'
+    },
+  },
   // {
   //   key: 'datetime',
   //   value: [],
@@ -147,16 +159,17 @@ onMounted(() => {
   //     columns_type: ['year', 'month']
   //   },
   // },
-  {
-    key: 'imageUploader',
-    value: '',
-    label: '图片上传',
-    component_props: {
-      name: 'image_uploader',
-      image_type: ['jpg', 'png'],
-      multiple: false
-    }
-  }];
+  // {
+  //   key: 'imageUploader',
+  //   value: '',
+  //   label: '图片上传',
+  //   component_props: {
+  //     name: 'image_uploader',
+  //     image_type: ['jpg', 'png'],
+  //     multiple: false
+  //   }
+  // }
+  ];
   // 生成自定义组件
   createComponentType(mockData.value)
 })