✨ feat(手机号组件): 判断必填项字段调整修复

 <!--
 <!--
  * @Date: 2022-09-02 10:46:03
  * @Date: 2022-09-02 10:46:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 16:03:00
+ * @LastEditTime: 2022-11-18 11:08:29
  * @FilePath: /data-table/src/components/PhoneField/index.vue
  * @FilePath: /data-table/src/components/PhoneField/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div class="phone-field-page">
   <div class="phone-field-page">
-    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
-    <van-field v-model="item.value" :name="item.name" type="digit" maxlength="11" :placeholder="item.component_props.placeholder"
-      :rules="rules" :required="item.component_props.required" :readonly="readonly" @touchstart.stop="show = true" :border="false">
+    <div class="label">
+      {{ item.component_props.label }}
+      <span v-if="item.component_props.required">&nbsp;*</span>
+    </div>
+    <van-field
+      v-model="item.value"
+      :name="item.name"
+      type="digit"
+      maxlength="11"
+      :placeholder="item.component_props.placeholder"
+      :rules="rules"
+      :required="item.component_props.required"
+      :readonly="readonly"
+      @touchstart.stop="show = true"
+      :border="false"
+    >
     </van-field>
     </van-field>
-    <van-number-keyboard v-model="item.value" :show="show" :maxlength="11" @blur="show = false" />
+    <van-number-keyboard
+      v-model="item.value"
+      :show="show"
+      :maxlength="11"
+      @blur="show = false"
+    />
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { wxInfo } from '@/utils/tools'
+import { wxInfo } from "@/utils/tools";
 
 
 const props = defineProps({
 const props = defineProps({
-  item: Object
+  item: Object,
 });
 });
 
 
 // web端判断
 // web端判断
-const readonly = computed(() => wxInfo().isMobile)
+const readonly = computed(() => wxInfo().isMobile);
 
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 // 校验函数返回 true 表示校验通过，false 表示不通过
 const validator = (val) => {
 const validator = (val) => {
-  if (!props.item.required) { // 非必填
-    return true
+  if (!props.item.component_props.required) {
+    // 非必填
+    return true;
   } else {
   } else {
     return /1\d{10}/.test(val);
     return /1\d{10}/.test(val);
   }
   }
@@ -36,25 +55,25 @@ const validator = (val) => {
 // 错误提示文案
 // 错误提示文案
 const validatorMessage = (val, rule) => {
 const validatorMessage = (val, rule) => {
   if (!val) {
   if (!val) {
-    return '手机号码不能为空';
+    return "手机号码不能为空";
   } else if (!/1\d{10}/.test(val)) {
   } else if (!/1\d{10}/.test(val)) {
-    return '请输入正确手机号码';
+    return "请输入正确手机号码";
   }
   }
-}
-const rules = [{ validator, message: validatorMessage }]
+};
+const rules = [{ validator, message: validatorMessage }];
 
 
 const show = ref(false);
 const show = ref(false);
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-  .phone-field-page {
-    .label {
-      padding: 1rem 1rem 0 1rem;
-      font-size: 0.9rem;
-      font-weight: bold;
-      span {
-        color: red;
-      }
+.phone-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
     }
     }
   }
   }
+}
 </style>
 </style>