fix 弹出框功能适配

hookehuyr
Commit aa0df9490dff8ef4abb8a7c08bb36439fcd82082 aa0df949 1 parent 2dd86983
Showing 4 changed files with 114 additions and 7 deletions
src/components/IdentityField/index.vue
src/components/NumberField/index.vue
src/components/PhoneField/index.vue
src/store/index.js
--- a/src/components/IdentityField/index.vue
View file @aa0df94
+++ b/src/components/IdentityField/index.vue
View file @aa0df94
@@ -13,6 +13,7 @@
     </div>
     <van-field
       v-model="item.value"
+      :id="item.name"
       :name="item.name"
       :placeholder="item.component_props.placeholder"
       :rules="rules"
@@ -36,15 +37,33 @@
 <script setup>
 import $ from "jquery";
+import { storeToRefs, mainStore } from "@/utils/generatePackage";
 const props = defineProps({
   item: Object,
 });
 const show = ref(false);
+let content = "";
+
+const store = mainStore();
+const { fieldName } = storeToRefs(store);
+
+// 监听字段变化
+watch(
+  () => fieldName.value,
+  (v) => {
+    // 如果不是点击本输入框
+    if (v !== props.item.name) {
+      // 还原border颜色
+      $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
+      show.value = false;
+      document.getElementById("app").style.paddingBottom = "0";
+    }
+  }
+);
 const openKeyboard = (e) => {
-  show.value = true;
   // 键盘上移动
   const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
   const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
@@ -53,12 +72,24 @@ const openKeyboard = (e) => {
     document.getElementById("app").style.paddingBottom = "244px";
     window.scrollTo(0, $("#app").height());
   } else {
+    // 向上滚动位置
     document.documentElement.scrollTop = target_top + 244;
   }
+  // 选中添加border颜色
+  content = $(e.target).parent();
+  // TAG: 自定义主题颜色
+  content.css("border-color", "#c2915f");
+  setTimeout(() => {
+    show.value = true;
+  }, 300);
+  // 记录点击field名
+  store.changeFieldName(props.item.name);
 };
 const blurKeyboard = () => {
   show.value = false;
   document.getElementById("app").style.paddingBottom = "0";
+  // 还原border颜色
+  content.css("border-color", "#eaeaea");
 };
 // 校验函数返回 true 表示校验通过，false 表示不通过
--- a/src/components/NumberField/index.vue
View file @aa0df94
+++ b/src/components/NumberField/index.vue
View file @aa0df94
@@ -13,6 +13,7 @@
     </div>
     <van-field
       v-model="item.value"
+      :id="item.name"
       :name="item.name"
       :placeholder="item.component_props.placeholder"
       :rules="item.rules"
@@ -44,19 +45,37 @@
 <script setup>
 import $ from "jquery";
+import { storeToRefs, mainStore } from "@/utils/generatePackage";
 const props = defineProps({
   item: Object,
 });
+let content = "";
-const showKeyboard = (e) => {
+const store = mainStore();
+const { fieldName } = storeToRefs(store);
+
+// 监听字段变化
+watch(
+  () => fieldName.value,
+  (v) => {
+    // 如果不是点击本输入框
+    if (v !== props.item.name) {
+      // 还原border颜色
+      $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
       if (props.item.component_props.type === "decimal") {
         // 显示小数键盘
-    showDecimal.value = true;
+        showDecimal.value = false;
       } else {
         // 显示整数键盘
-    showInteger.value = true;
+        showInteger.value = false;
+      }
+      document.getElementById("app").style.paddingBottom = "0";
     }
+  }
+);
+
+const showKeyboard = (e) => {
   // 键盘上移动
   // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
   const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
@@ -65,8 +84,24 @@ const showKeyboard = (e) => {
   if (target_top < 244) {
     window.scrollTo(0, $("#app").height());
   } else {
+    // 向上滚动位置
     document.documentElement.scrollTop = target_top + 244;
   }
+  // 选中添加border颜色
+  content = $(e.target).parent();
+  // TAG: 自定义主题颜色
+  content.css("border-color", "#c2915f");
+  setTimeout(() => {
+    if (props.item.component_props.type === "decimal") {
+      // 显示小数键盘
+      showDecimal.value = true;
+    } else {
+      // 显示整数键盘
+      showInteger.value = true;
+    }
+  }, 300);
+  // 记录点击field名
+  store.changeFieldName(props.item.name);
 };
 const blurKeyboard = () => {
   if (props.item.component_props.type === "decimal") {
@@ -77,6 +112,8 @@ const blurKeyboard = () => {
     showInteger.value = false;
   }
   document.getElementById("app").style.paddingBottom = "0";
+  // 还原border颜色
+  content.css("border-color", "#eaeaea");
 };
 const showDecimal = ref(false);
@@ -123,4 +160,8 @@ const onDelete = () => {};
   border-radius: 0.25rem;
   padding: 0.25rem 0.5rem;
 }
+
+:deep(.van-number-keyboard__title) {
+  font-size: 1.05rem;
+}
 </style>
--- a/src/components/PhoneField/index.vue
View file @aa0df94
+++ b/src/components/PhoneField/index.vue
View file @aa0df94
@@ -12,6 +12,7 @@
       <span v-if="item.component_props.required">&nbsp;*</span>
     </div>
     <van-field
+      :id="item.name"
       v-model="item.value"
       :name="item.name"
       type="digit"
@@ -36,6 +37,7 @@
 <script setup>
 import { wxInfo } from "@/utils/tools";
 import $ from "jquery";
+import { storeToRefs, mainStore } from "@/utils/generatePackage";
 const props = defineProps({
   item: Object,
@@ -64,9 +66,26 @@ const validatorMessage = (val, rule) => {
 const rules = [{ validator, message: validatorMessage }];
 const show = ref(false);
+let content = "";
+
+const store = mainStore();
+const { fieldName } = storeToRefs(store);
+
+// 监听字段变化
+watch(
+  () => fieldName.value,
+  (v) => {
+    // 如果不是点击本输入框
+    if (v !== props.item.name) {
+      // 还原border颜色
+      $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
+      show.value = false;
+      document.getElementById("app").style.paddingBottom = "0";
+    }
+  }
+);
 const openKeyboard = (e) => {
-  show.value = true;
   // 键盘上移动
   const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
   const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
@@ -75,12 +94,24 @@ const openKeyboard = (e) => {
     document.getElementById("app").style.paddingBottom = "244px";
     window.scrollTo(0, $("#app").height());
   } else {
+    // 向上滚动位置
     document.documentElement.scrollTop = target_top + 244;
   }
+  // 选中添加border颜色
+  content = $(e.target).parent();
+  // TAG: 自定义主题颜色
+  content.css("border-color", "#c2915f");
+  setTimeout(() => {
+    show.value = true;
+  }, 300);
+  // 记录点击field名
+  store.changeFieldName(props.item.name);
 };
 const blurKeyboard = () => {
   show.value = false;
   document.getElementById("app").style.paddingBottom = "0";
+  // 还原border颜色
+  content.css("border-color", "#eaeaea");
 };
 </script>
--- a/src/store/index.js
View file @aa0df94
+++ b/src/store/index.js
View file @aa0df94
 /*
  * @Date: 2022-04-18 15:59:42
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-13 11:30:40
+ * @LastEditTime: 2022-11-29 22:37:01
- * @FilePath: /tswj/src/store/index.js
+ * @FilePath: /data-table/src/store/index.js
  * @Description: 文件描述
  */
 import { defineStore } from 'pinia';
@@ -23,6 +23,7 @@ export const mainStore = defineStore('main', {
       scrollTopLike: 0,
       scrollTopPerson: 0,
       keepPages: ['default'], // 很坑爹，空值全部都缓存
+      fieldName: ''
     };
   },
   getters: {
@@ -67,6 +68,9 @@ export const mainStore = defineStore('main', {
       const $router = useRouter();
       const page = $router.currentRoute.value.meta.name;
       _.remove(this.keepPages, item => item === page)
+    },
+    changeFieldName (v) {
+      this.fieldName = v;
     }
   },
 });