yh-mobile-components 1.0.2 → 1.0.4

package/form/yhmPassword.vue

@@ -0,0 +1,106 @@
+<template>
+  <van-field
+    class="yhm-input-container"
+    v-bind="$attrs"
+    :model-value="modelValue"
+    @update:modelValue="changeHandler"
+    :type="inputType"
+    :error="error"
+    :error-message="errorMessage">
+    <template #right-icon>
+      <svg
+        width="40px"
+        height="20px"
+        style="vertical-align: middle"
+        viewBox="0 0 2000 1000"
+        xmlns="http://www.w3.org/2000/svg"
+        @click="showPassword = !showPassword">
+        <path
+          d="M100,100 L1900,100 L1900,900 L100,900 Z"
+          stroke="var(--van-field-right-icon-color)"
+          stroke-width="60"
+          stroke-linejoin="round"
+          fill="none"></path>
+        <g v-if="!showPassword">
+          <circle
+            r="150"
+            stroke-width="0"
+            fill="var(--van-field-right-icon-color)"
+            cx="500"
+            cy="500"></circle>
+          <circle
+            r="150"
+            stroke-width="0"
+            fill="var(--van-field-right-icon-color)"
+            cx="1000"
+            cy="500"></circle>
+          <circle
+            r="150"
+            stroke-width="0"
+            fill="var(--van-field-right-icon-color)"
+            cx="1500"
+            cy="500"></circle>
+        </g>
+        <g v-else>
+          <polyline
+            points="350,300 650,300 500,300 500 700"
+            stroke="var(--van-field-right-icon-color)"
+            stroke-width="60"
+            stroke-linejoin="round"
+            fill="none"></polyline>
+          <polyline
+            points="850,300 1150,300 1000,300 1000 700"
+            stroke="var(--van-field-right-icon-color)"
+            stroke-width="60"
+            stroke-linejoin="round"
+            fill="none"></polyline>
+          <polyline
+            points="1350,300 1650,300 1500,300 1500 700"
+            stroke="var(--van-field-right-icon-color)"
+            stroke-width="60"
+            stroke-linejoin="round"
+            fill="none"></polyline>
+        </g>
+      </svg>
+    </template>
+  </van-field>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+const props = withDefaults(
+  defineProps<{
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+    scanCallback?: (val) => void;
+  }>(),
+  {}
+);
+
+const showPassword = ref(false);
+
+const inputType = computed(() => {
+  if (showPassword.value) {
+    return "text";
+  } else {
+    return "password";
+  }
+});
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: any);
+  (e: "change", val: any);
+}>();
+
+function changeHandler(val) {
+  emits("update:modelValue", val);
+  emits("change", val);
+}
+</script>
+<style lang="scss">
+.yhm-input-container {
+  .van-field__control {
+    text-align: right;
+  }
+}
+</style>

package/index.ts

@@ -10,6 +10,7 @@ import yhmCheckbox from "./form/yhmCheckbox.vue";
 import yhmSelect from "./form/yhmSelect.vue";
 import yhmInput from "./form/yhmInput.vue";
 import yhmSwitch from "./form/yhmSwitch.vue";
+import yhmPassword from "./form/yhmPassword.vue";
 import vant from "vant";
 import "vant/lib/index.css";
 import "yh-mobile-components/custom.scss";
@@ -28,6 +29,7 @@ export default {
     app.component("yhm-input", yhmInput);
     app.component("yhm-select", yhmSelect);
     app.component("yhm-switch", yhmSwitch);
+    app.component("yhm-password", yhmPassword);
     app.use(vant);
   },
 };

package/info/yhmList.vue

@@ -40,10 +40,10 @@
           <yhm-info has-top>
             <template v-for="item in listConfig?.items">
               <yhm-info-item
-                v-if="!item.show || (item.show && item.show(row))"
+                v-if="!item.show || (item.show && item.show(row, params, keyword))"
                 :label="item.label"
                 :span="item.span"
-                :status="item.status && item.status(row)"
+                :status="item.status && item.status(row, params, keyword)"
                 :description="row[item.description] || item.description"
                 :value="row[item.value] || item.value">
                 <slot

package/package.json

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

package/types.ts

@@ -31,10 +31,18 @@ export interface ListItem<T> {
   description: keyof T;
   /** 自定义插槽，用来渲染自定义元素 */
   slot?: string;
-  /** 值的样式，自定义不同的颜色 */
-  status?: (row: T) => StatusType;
-  /** 是否显示 */
-  show?: (row: T) => boolean;
+  /** 值的样式，自定义不同的颜色
+   * @param row 当前行数据
+   * @param params 列表筛选数据
+   * @param keyword 列表筛选关键字
+   */
+  status?: (row: T, parmas: any, keyword: string) => StatusType;
+  /** 是否显示
+   * @param row 当前行数据
+   * @param params 列表筛选数据
+   * @param keyword 列表筛选关键字
+   */
+  show?: (row: T, parmas: any, keyword: string) => boolean;
 }
 
 /** 列表配置 */
@@ -63,7 +71,7 @@ export interface vanOption {
 }
 
 export type DateTimeType = "year" | "month" | "datetime" | "date" | "time";
-export type InputType = "color" | "email" | "number" | "tel" | "text" | "textarea" | "url" | "digit";
+export type InputType = "color" | "email" | "number" | "tel" | "text" | "textarea" | "url" | "digit" | "scan";
 export type OtherType = "checkbox" | "radio" | "select" | "switch" | "password" | "rate" | "signature" | "cascader" | "slider" | "stepper";
 
 export type FromItemType = OtherType | InputType | DateTimeType;