yh-mobile-components 1.4.6 → 1.4.8

package/form/yhmInput.vue

@@ -62,7 +62,7 @@ function changeHandler(val) {
   if (props.type === "number" && props.precision && !isNaN(props.precision)) {
     let valArr = val.split(".");
     if (valArr[1] && valArr[1].length && valArr[1].length > props.precision) {
-      val = `${valArr[0]}.${valArr[1].substring(0, props.precision + 1)}`;
+      val = `${valArr[0]}.${valArr[1].substring(0, props.precision)}`;
     }
   }
   emits("update:modelValue", val);

package/info/yhmList.vue

@@ -5,8 +5,7 @@
         v-for="conf in tabsParamsConfig"
         :valueObj="params"
         :value="conf.value"
-        :optionData="conf.optionData"
-        @change="getList(true)"></yhm-tabs>
+        :optionData="conf.optionData"></yhm-tabs>
       <van-search
         v-if="hasSearch"
         v-model="keyword"
@@ -18,8 +17,7 @@
           :valueObj="params"
           :value="conf.value"
           :optionData="conf.optionData"
-          v-for="conf in dropdownParamsConfig"
-          @change="getList(true)"></yhm-dropdown-item>
+          v-for="conf in dropdownParamsConfig"></yhm-dropdown-item>
         <van-dropdown-item
           title="筛选"
           class="custom-param-container"
@@ -41,25 +39,24 @@
         finished-text="没有更多了"
         ref="scrollContent"
         @load="getList">
-        <template v-for="row in list">
+        <template v-for="row in renderCustom">
           <yhm-info has-top>
-            <template v-for="item in listConfig?.items">
+            <template v-for="col in row">
+              <slot
+                v-if="col.slot"
+                :name="col.slot"
+                :row="row"></slot>
               <yhm-info-item
-                v-if="!item.show || (item.show && item.show(row))"
-                :label="item.label"
+                v-else
+                :label="col.label"
                 regular-value
-                :span="item.span"
-                :align="item.align || align"
-                :desc-align="item.descAlign || descAlign"
-                :font-size="item.fontSize || fontSize"
-                :status="item.status && item.status(row)"
-                :description="row[item.description] || item.description"
-                :value="row[item.value] || item.value">
-                <slot
-                  v-if="item.slot"
-                  name="slot"
-                  :row="row"></slot>
-              </yhm-info-item>
+                :span="col.span"
+                :align="col.align || align"
+                :desc-align="col.descAlign || descAlign"
+                :font-size="col.fontSize || fontSize"
+                :status="col.status"
+                :description="col.description"
+                :value="col.value"></yhm-info-item>
             </template>
           </yhm-info>
           <yhm-info
@@ -82,7 +79,7 @@
 <script setup lang="ts">
 import type { ListConfig, ParamConfig } from "../types";
 import type { ListInstance } from "vant";
-import { ref, reactive, computed, onMounted, onActivated } from "vue";
+import { ref, reactive, computed, watch, onMounted, onActivated } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -190,6 +187,37 @@ async function getList(isClear = false) {
   }, 500);
 }
 
+watch(
+  () => params,
+  () => {
+    getList(true);
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+const renderCustom = computed(() => {
+  return list.value.map((row) => {
+    return props.listConfig.items
+      .filter((item) => !item.show || (item.show && item.show(row)))
+      .map(({ label, span, align, descAlign, fontSize, status, description, defaultDescription, slot, value, defaultValue }) => {
+        return {
+          label,
+          span,
+          align,
+          descAlign: descAlign || props.descAlign,
+          fontSize: fontSize || props.fontSize,
+          status: status ? status(row) : "",
+          description: description ? row[description] || defaultDescription : "",
+          value: value ? row[value] || defaultValue : "",
+          slot,
+        };
+      });
+  });
+});
+
 onMounted(() => {
   if (props.paramConfig && props.paramConfig.length) {
     for (let i = 0; i < props.paramConfig.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-mobile-components",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "移动端组件封装及配置化需求",
   "main": "index.js",
   "scripts": {

package/types.ts

@@ -40,9 +40,11 @@ export interface ListItem<T> {
   label: string;
   /** 字段值或者键，显示在右上方 */
   value: keyof T;
+  defaultValue?: string;
   align?: "left" | "center" | "right";
   /** 字段描述或者键，显示在下方 */
   description?: keyof T;
+  defaultDescription?: string;
   descAlign?: "left" | "center" | "right";
   fontSize?: number;
   /** 自定义插槽，用来渲染自定义元素 */