yh-mobile-components 1.3.0 → 1.3.3

package/CHANGELOG.md

@@ -0,0 +1,2 @@
+- v1.3.2 yhm-input 修复 input 框没有 focus方法的问题
+- v1.3.1 yhm-select 修复值域下拉选项不匹配导致报错的问题

package/form/yhmInput.vue

@@ -7,6 +7,7 @@
     @keydown="keydownHandler"
     :type="inputType"
     :error="error"
+    ref="fieldRef"
     :error-message="errorMessage">
     <template
       #right-icon
@@ -28,7 +29,7 @@
   </van-field>
 </template>
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 const props = withDefaults(
   defineProps<{
     type?: string;
@@ -71,6 +72,16 @@ function keydownHandler(e: KeyboardEvent) {
     }
   }
 }
+
+const fieldRef = ref();
+function focus() {
+  fieldRef.value?.focus();
+}
+
+function blur() {
+  fieldRef.value?.blur();
+}
+defineExpose({ fieldRef, focus, blur });
 </script>
 <style lang="scss">
 .yhm-input-container {

package/form/yhmSelect.vue

@@ -41,7 +41,8 @@ const emits = defineEmits<{
 
 const valueString = computed(() => {
   if (props.modelValue) {
-    return props.optionData.filter((item) => item.value === props.modelValue)[0].text;
+    let option = props.optionData.filter((item) => item.value === props.modelValue)[0];
+    return option ? option.text : props.modelValue;
   } else {
     return props.palceholder || "请选择";
   }

package/form/yhmSwitch.vue

@@ -25,8 +25,6 @@
   </van-field>
 </template>
 <script setup lang="ts">
-import { computed } from "vue";
-
 const props = withDefaults(
   defineProps<{
     error?: boolean;

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

@@ -33,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">
@@ -50,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))"
@@ -69,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<{
@@ -80,6 +83,9 @@ const props = withDefaults(
     /** 关键字筛选提示语 */
     searchPlaceholder?: string;
     paramType?: "dropdown" | "tabs";
+    align?: "left" | "center" | "right";
+    descAlign?: "left" | "center" | "right";
+    fontSize?: number;
     /** 下拉筛选条件配置 */
     paramConfig?: ParamConfig[];
     /** 列表项目筛选 */
@@ -97,6 +103,8 @@ const props = withDefaults(
   {
     hasSearch: false,
     searchPlaceholder: "输入关键词搜索",
+    align: "right",
+    descAlign: "left",
   }
 );
 

package/package.json

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

package/types.ts

@@ -7,7 +7,7 @@ export type SizeType = "mini" | "medium" | "lager";
 /** 下拉参数配置 */
 export interface ParamConfig {
   optionData?: vanOption[];
-  type: "tabs" | "dropdown";
+  type?: "tabs" | "dropdown";
   value: string;
   defaultValue: any;
 }
@@ -39,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;
   /** 值的样式，自定义不同的颜色
@@ -65,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 }>;