✨ feat(邮箱控件): 样式和功能调整

hookehuyr
Commit 1f1ccf65d77d36458b7a69dbb183b7af2f93d6b5 1f1ccf65 1 parent 01aebc01
Showing 3 changed files with 87 additions and 37 deletions
src/components/EmailField/index.vue
src/hooks/useComponentType.js
src/pages/table/index.vue
--- a/src/components/EmailField/index.vue
View file @1f1ccf6
+++ b/src/components/EmailField/index.vue
View file @1f1ccf6
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-18 15:58:11
+ * @LastEditTime: 2023-04-06 17:19:02
- * @FilePath: /data-table/src/components/EmailField/index.vue
+ * @FilePath: /custom_form/src/components/EmailField/index.vue
  * @Description: 邮箱输入框
 -->
 <template>
   <div v-if="HideShow" class="text-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
+      <text v-if="item.component_props.required">&nbsp;*</text>
       {{ item.component_props.label }}
     </div>
-    <van-field
+    <nut-input
-      v-model="item.value"
+      v-model="input_value"
       :name="item.name"
       type="email"
       :placeholder="item.component_props.placeholder"
-      :rules="rules"
-      :required="item.component_props.required"
       :disabled="item.component_props.disabled"
       :readonly="item.component_props.readonly"
       clearable
+      :border="false"
+      @blur="onBlur"
+      style="border: 1px solid #eaeaea; border-radius: 0.25rem; padding: 0.25rem 0.5rem;"
     />
+    <div
+      v-if="show_error"
+      style="padding-left: 20px; color: red; font-size: 12px;"
+    >
+      {{ error_msg }}
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+
 const props = defineProps({
   item: Object,
 });
+
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+
+const onBlur = () => {
+  // 发送自定义回调数字
+  props.item.value = {
+    key: "email",
+    filed_name: props.item.key,
+    value: input_value.value,
+  };
+  emit("active", props.item.value);
+  validEmail()
+}
+
 const required = props.item.component_props.required;
-const validator = (val) => {
+const emit = defineEmits(["active"]);
-  if (required && !val) {
+const input_value = ref(props.item.component_props.default);
-    return false;
+
-  } else if (val && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(val)) {
+const show_error = ref(false);
-    return false;
+const error_msg = ref('');
+
+// 校验模块
+const validEmail = () => {
+  if (required && !input_value.value) {
+    show_error.value = true;
+    error_msg.value = '必填项不能为空';
+  } else if (input_value.value && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(input_value.value)) {
+    show_error.value = true;
+    error_msg.value = '请输入正确邮箱';
   } else {
-    return true;
+    show_error.value = false;
-  }
+    error_msg.value = '';
-};
-// 错误提示文案
-const validatorMessage = (val, rule) => {
-  if (required && !val) {
-    return "必填项不能为空";
-  } else if (val && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(val)) { // 小于最小值
-    return "请输入正确邮箱";
   }
+  return !show_error.value;
 };
-const rules = [{ validator, message: validatorMessage }];
+
+defineExpose({ validEmail, id: props.item.key });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .text-field-page {
   .label {
-    padding: 1rem 1rem 0 1rem;
+    padding: 30px 30px 0 30px;
-    font-size: 0.9rem;
+    font-size: 26px;
     font-weight: bold;
-    span {
+    text {
       color: red;
     }
   }
-}
-:deep(.van-field__body) {
+  .nut-input {
-  border: 1px solid #eaeaea;
+    padding: 20px 25px;
-  border-radius: 0.25rem;
+  }
-  padding: 0.25rem 0.5rem;
 }
+
+// :deep(.van-field__body) {
+//   border: 1px solid #eaeaea;
+//   border-radius: 0.25rem;
+//   padding: 0.25rem 0.5rem;
+// }
 </style>
--- a/src/hooks/useComponentType.js
View file @1f1ccf6
+++ b/src/hooks/useComponentType.js
View file @1f1ccf6
@@ -11,7 +11,7 @@ import PickerField from '@/components/PickerField/index.vue'
 // import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 // import FileUploaderField from '@/components/FileUploaderField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
-// import EmailField from '@/components/EmailField/index.vue'
+import EmailField from '@/components/EmailField/index.vue'
 // import SignField from '@/components/SignField/index.vue'
 // import RatePickerField from '@/components/RatePickerField/index.vue'
 // import CalendarField from '@/components/CalendarField/index.vue'
@@ -115,10 +115,10 @@ export function createComponentType(data) {
       item.name = item.key
       item.component = PhoneField
     }
-    // if (item.component_props.tag === 'email') {
+    if (item.component_props.tag === 'email') {
-    //   item.name = item.key
+      item.name = item.key
-    //   item.component = EmailField
+      item.component = EmailField
-    // }
+    }
     // if (item.component_props.tag === 'sign') {
     //   item.name = item.key
     //   item.component = SignField
--- a/src/pages/table/index.vue
View file @1f1ccf6
+++ b/src/pages/table/index.vue
View file @1f1ccf6
 <!--
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-04-06 16:38:28
+ * @LastEditTime: 2023-04-06 17:14:16
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
 -->
@@ -134,6 +134,7 @@ const multi_rule = ref([]);
 const picker = ref([]);
 const number = ref([]);
 const phone = ref([]);
+const email = ref([]);
 const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
@@ -166,6 +167,9 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "phone") {
       phone.value.push(el);
     }
+    if (item.component_props.tag === "email") {
+      email.value.push(el);
+    }
     if (item.component_props.tag === "area_picker") {
       area_picker.value.push(el);
     }
@@ -431,6 +435,9 @@ const onActive = (item) => {
   if (item.key === "phone") {
     postData.value[item.filed_name] = item.value;
   }
+  if (item.key === "email") {
+    postData.value[item.filed_name] = item.value;
+  }
   if (item.key === "image_uploader") {
     postData.value[item.filed_name] = item.value;
   }
@@ -561,6 +568,19 @@ const validOther = () => {
       }
     });
   }
+  if (email.value) {
+    // 邮箱
+    email.value.forEach((item, index) => {
+      if (!email.value[index].validEmail()) {
+        valid = {
+          status: email.value[index].validEmail(),
+          key: "email",
+          id: email.value[index]?.id
+        };
+        return false;
+      }
+    });
+  }
   if (area_picker.value) {
     // 省市区地址
     area_picker.value.forEach((item, index) => {