yh-mobile-components 1.2.2 → 1.3.1

package/info/yhmInfoItem.vue

@@ -16,7 +16,7 @@
   </section>
 </template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 const props = withDefaults(
   defineProps<{
     span: number;
@@ -24,13 +24,23 @@ const props = withDefaults(
     value?: string;
     description?: string;
     regularValue?: boolean;
+    fontSize?: number;
+    align?: "left" | "center" | "right";
+    descAlign?: "left" | "center" | "right";
     status?: "primary" | "success" | "danger" | "warning" | "cyan" | "purple" | "yellow" | "pink";
   }>(),
   {
     span: 24,
+    fontSize: 14,
+    align: "right",
+    descAlign: "left",
   }
 );
 
+const fontSize = computed(() => {
+  return `${props.fontSize}px`;
+});
+
 const widthCount = computed(() => {
   return 24 / props.span;
 });
@@ -38,22 +48,21 @@ const widthCount = computed(() => {
 <style lang="scss">
 .yhm-info-item-container {
   width: calc((100% - (8px * v-bind(widthCount))) / v-bind(widthCount));
-  font-size: var(--van-font-size-md);
+  font-size: v-bind(fontSize);
   padding: 4px 0;
   margin-right: 8px;
   .yhm-info-item {
     display: flex;
     padding: 4px 0;
-    line-height: 18px;
+    line-height: 1.3em;
     .yhm-info-item-value {
       flex: 1;
-      text-align: right;
       color: var(--van-text-color-2);
+      text-align: v-bind("$props.align");
+      padding-left: 5px;
     }
     &.regular-value {
       .yhm-info-item-value {
-        flex: 1;
-        text-align: right;
         color: var(--van-text-color);
       }
     }
@@ -61,7 +70,8 @@ const widthCount = computed(() => {
   .yhm-info-description {
     color: var(--van-text-color-2);
     padding: 2px 0;
-    line-height: 16px;
+    line-height: 1.3em;
+    text-align: v-bind("$props.descAlign");
   }
   &.primary {
     .yhm-info-item {

package/info/yhmList.vue

@@ -1,29 +1,26 @@
 <template>
   <section class="yhm-list-container">
     <section class="list-condition-container">
+      <yhm-tabs
+        v-for="conf in tabsParamsConfig"
+        :valueObj="params"
+        :value="conf.value"
+        :optionData="conf.optionData"
+        @change="getList(true)"></yhm-tabs>
       <van-search
         v-if="hasSearch"
         v-model="keyword"
         :placeholder="searchPlaceholder"
         @update:model-value="getList(true)"
         :clearable="false"></van-search>
-      <template v-if="paramConfig && paramConfig.length">
-        <van-dropdown-menu v-if="paramType === 'dropdown'">
-          <yhm-dropdown-item
-            :valueObj="params"
-            :value="conf.value"
-            :optionData="conf.optionData"
-            v-for="conf in paramConfig"
-            @change="getList(true)"></yhm-dropdown-item>
-        </van-dropdown-menu>
-        <yhm-tabs
-          v-else
+      <van-dropdown-menu v-if="dropdownParamsConfig && dropdownParamsConfig.length">
+        <yhm-dropdown-item
           :valueObj="params"
           :value="conf.value"
           :optionData="conf.optionData"
-          v-for="conf in paramConfig"
-          @change="getList(true)"></yhm-tabs>
-      </template>
+          v-for="conf in dropdownParamsConfig"
+          @change="getList(true)"></yhm-dropdown-item>
+      </van-dropdown-menu>
     </section>
     <van-pull-refresh
       v-model="refreshing"
@@ -36,13 +33,17 @@
         finished-text="没有更多了"
         ref="scrollContent"
         @load="getList">
-        <template v-for="(row, index) in list">
+        <template v-for="row in list">
           <yhm-info has-top>
             <template v-for="item in listConfig?.items">
               <yhm-info-item
                 v-if="!item.show || (item.show && item.show(row))"
                 :label="item.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">
@@ -53,7 +54,9 @@
               </yhm-info-item>
             </template>
           </yhm-info>
-          <yhm-info class="yhm-list-item-actions">
+          <yhm-info
+            class="yhm-list-item-actions"
+            v-if="listConfig.btns && listConfig.btns.length > 0">
             <template v-for="btn in listConfig.btns">
               <div
                 v-if="!btn.show || (btn.show && btn.show(row))"
@@ -72,9 +75,6 @@
 import type { ListConfig, ParamConfig } from "../types";
 import type { ListInstance } from "vant";
 import { ref, reactive, computed, onMounted, onActivated } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
 
 const props = withDefaults(
   defineProps<{
@@ -83,6 +83,9 @@ const props = withDefaults(
     /** 关键字筛选提示语 */
     searchPlaceholder?: string;
     paramType?: "dropdown" | "tabs";
+    align?: "left" | "center" | "right";
+    descAlign?: "left" | "center" | "right";
+    fontSize?: number;
     /** 下拉筛选条件配置 */
     paramConfig?: ParamConfig[];
     /** 列表项目筛选 */
@@ -100,6 +103,8 @@ const props = withDefaults(
   {
     hasSearch: false,
     searchPlaceholder: "输入关键词搜索",
+    align: "right",
+    descAlign: "left",
   }
 );
 
@@ -114,6 +119,18 @@ const pageSize = ref(15);
 const refreshing = ref(false);
 const finished = ref(false);
 
+const tabsParamsConfig = computed(() => {
+  return props.paramConfig?.filter((config) => {
+    return config.type === "tabs";
+  });
+});
+
+const dropdownParamsConfig = computed(() => {
+  return props.paramConfig?.filter((config) => {
+    return config.type === "dropdown";
+  });
+});
+
 let timer: number | null = null;
 async function getList(isClear = false) {
   if (timer) {

package/package.json

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

package/types.ts

@@ -7,6 +7,7 @@ export type SizeType = "mini" | "medium" | "lager";
 /** 下拉参数配置 */
 export interface ParamConfig {
   optionData?: vanOption[];
+  type?: "tabs" | "dropdown";
   value: string;
   defaultValue: any;
 }
@@ -38,8 +39,11 @@ export interface ListItem<T> {
   label: string;
   /** 字段值或者键，显示在右上方 */
   value: keyof T;
+  align?: "left" | "center" | "right";
   /** 字段描述或者键，显示在下方 */
-  description: keyof T;
+  description?: keyof T;
+  descAlign?: "left" | "center" | "right";
+  fontSize?: number;
   /** 自定义插槽，用来渲染自定义元素 */
   slot?: string;
   /** 值的样式，自定义不同的颜色
@@ -64,6 +68,9 @@ export interface ListConfigObject<T> {
   hasSearch: boolean;
   searchPlaceholder: string;
   paramType?: "dropdown" | "tabs";
+  align?: "left" | "center" | "right";
+  descAlign?: "left" | "center" | "right";
+  fontSize: number;
   paramConfig: ParamConfig[];
   listConfig: ListConfig<T>;
   getData: (pageIndex, pageSie, params, keyword) => Promise<{ data: any[]; total: number }>;