@dhccmobile/vue3-lo-form 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhccmobile/vue3-lo-form",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "VUE3动态表单",
   "private": false,
   "main": "dist/vue3-lo-form.umd.js",
@@ -14,8 +14,7 @@
     "clean:lib": "rimraf types && rimraf dist",
     "build:lib": "npm run clean:lib && npm run tsc && npm run lib && npm pack",
     "publish": "npm publish --registry https://registry.npmjs.org --access public",
-    "publish:lib": "npm run build:lib && npm run publish",
-    "publish:lib1": "npm run publish"
+    "publish:lib": "npm run build:lib && npm run publish"
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
@@ -43,18 +42,18 @@
     "@types/moment": "^2.13.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~4.5.10",
-    "@vue/cli-plugin-eslint": "~4.5.10",
-    "@vue/cli-plugin-router": "~4.5.10",
-    "@vue/cli-plugin-typescript": "~4.5.17",
-    "@vue/cli-plugin-vuex": "~4.5.10",
-    "@vue/cli-service": "~4.5.10",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
     "@vue/compiler-sfc": "3.4.35",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "eslint": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^8.0.1",
     "less": "^4.2.0",
     "less-loader": "^11.0.0",
     "prettier": "^2.2.1",

package/src/App.vue

@@ -102,7 +102,7 @@
         </div>
         <div class="lo-input">
           <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
-          <dy-form v-if="showForm" :formId="'995416144285929472'" v-model:edit="formApi.edit" v-model:formApi="formApi" @change="onChange($event)" @click="onClick($event)" @focus="onFocus($event)" @blur="onBlur($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
+          <dy-form v-if="showForm" :formId="'984034993956851712'" v-model:edit="formApi.edit" v-model:formApi="formApi" @change="onChange($event)" @click="onClick($event)" @focus="onFocus($event)" @blur="onBlur($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
             <template #combinationSelector="{ control, onChange }">
               <div class="lo-custom-control-box">
                 <a-input v-model:value="control.formControl.value" @input="onChange(control.formControl)" v-if="control && control.formControl" />

package/src/components/form/DvFormLayout.vue

@@ -17,6 +17,7 @@
           ['form-model-item-' + controlAttr.boundProperty]: true,
           ['form-model-item-' + control.code]: true,
           'lo-form-model-item-textarea-box': control.code === formFieldType.Textarea.code,
+          'lo-form-item-mobile': isMobileBrowser(),
         }"
       >
         <template v-slot:label>
@@ -726,6 +727,9 @@ export default class DvFormLayout extends Vue {
   get labelSpanWidth(): any {
     const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
     const parentControlAttr: DesFormLayout = this.parentControlAttr as DesFormLayout;
+    if (this.isMobileBrowser()) {
+      return "120px";
+    }
     if (controlAttr.titleWidth) {
       return controlAttr.titleWidth;
     } else if (parentControlAttr.labelSpan) {
@@ -1198,6 +1202,9 @@ export default class DvFormLayout extends Vue {
    */
   get emptyLayoutContainerStyle(): any {
     let style: any = {};
+    if (this.isMobileBrowser()) {
+      return { display: "flex", "flex-direction": "column" };
+    }
     if (this.isIe) {
       style = { display: "flex", "flex-wrap": "wrap" };
     } else {
@@ -1214,6 +1221,9 @@ export default class DvFormLayout extends Vue {
    */
   get generalLayoutContainerStyle(): any {
     let style: any = {};
+    if (this.isMobileBrowser()) {
+      return { display: "flex", "flex-direction": "column" };
+    }
     if (this.isIe) {
       style = { display: "flex", "flex-wrap": "wrap" };
     } else {
@@ -1226,6 +1236,23 @@ export default class DvFormLayout extends Vue {
     }
     return style;
   }
+  /**
+   * 判断是否为移动端浏览器
+   * @returns {boolean} true=移动端，false=PC端
+   */
+  isMobileBrowser() {
+    // 匹配常见移动端设备的User-Agent关键词
+    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+    // 排除平板设备（可选，根据业务需求调整）
+    const tabletRegex = /iPad|Tablet|Nexus 7|Nexus 10/i;
+
+    const userAgent = navigator.userAgent;
+    const isMobile = mobileRegex.test(userAgent);
+    const isTablet = tabletRegex.test(userAgent);
+
+    // 业务逻辑：如果是平板，可根据需求返回true或false
+    return isMobile && !isTablet;
+  }
 
   /**
    * @description: 初始化部分数据
@@ -1566,4 +1593,14 @@ export default class DvFormLayout extends Vue {
 </script>
 <style lang="scss" scoped>
 @import "../../styles/themes.scss";
+
+.lo-form-item-mobile {
+  display: flex;
+  :deep(.ant-form-item-label) {
+    flex: 1 !important;
+  }
+  :deep(.ant-form-item-control) {
+    flex: 3 !important;
+  }
+}
 </style>

package/src/main.ts

@@ -9,8 +9,8 @@ const app = createApp(App);
 app.config.performance = true;
 app
   .use(VueLoForm, {
-    url: "http://10.7.114.81:30570",
-    appId: "1009549605007003648,1014269796445605888,1015215693289242624,1028015525370548224",
+    url: "http://82.156.213.34:8080",
+    appId: "1009549397931601920",
     onlySimpleLoadConfig: false,
     loadMode: "dynamic",
   })