yh-mobile-components 1.0.8 → 1.1.1

package/README.md

@@ -32,230 +32,4 @@ async function main() {
 main()
 ```
 
-## 类型或枚举
-
-###### 状态枚举 StatusType
-
-```js
-export type StatusType = "primary" | "danger" | "success" | "warning" | "cyan" | "purple" | "yellow" | "pink";
-```
-
-|属性|说明|
-|----|----|
-|primary|表示主要内容，文字显示为蓝色|
-|success|表示成功，文字显示为绿色|
-|danger|表示危险，文字显示为红色|
-|warning|表示警告，文字显示为橙色|
-|cyan|文字显示为青色|
-|purple|文字显示为紫色|
-|yellow|文字显示为黄色|
-|pink|文字显示为粉色|
-
-###### 数据选项 VanOption
-列表参数、下拉、单选、多选有用到
-
-```js
-/** 下拉、单选、多选等组件的数据选项 */
-export interface vanOption {
-  /** 选项的标签用来显示的 */
-  text: string;
-  /** 选项的值，用来赋值传递给后端的 */
-  value: string | number;
-}
-```
-
-```js
-const optionData = reactive([{text:"一",value:1},{text:"二",value:2},{text:"三",value:3}])
-```
-
-## 组件说明
-
-###### yhm-list
-使用下面的模板创建一个列表
-
-```html
-<template>
-  <yhm-list v-bind="configObj"></yhm-list>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import { ListConfig, ListConfigObject, ParamConfig } from "yh-mobile-components/types";
-
-const listConfig = reactive<ListConfig<any>>({
-  btns: [
-    {
-      type: "primary",
-      text: "详情",
-      callback(row) {
-        console.log(row);
-      },
-    },
-  ],
-  items: [
-    {
-      span: 12,
-      label: "标签名",
-      value: "name",
-      description: "标签描述",
-      status(row) {
-        return "primary";
-      },
-    },
-    {
-      span: 12,
-      label: "偶数显示",
-      value: "name",
-      description: "标签描述",
-      show(row) {
-        
-        return row.status === 0;
-      },
-      status(row) {
-        return "primary";
-      },
-    },
-    {
-      span: 24,
-      label: "标签名",
-      value: "name",
-      description: "标签描述",
-      status(row) {
-        return "primary";
-      },
-    },
-  ],
-});
-const paramConfig = reactive<ParamConfig[]>([
-  {
-    value: "param1",
-    optionData: [
-      { text: "全部", value: "" },
-      { text: "一", value: 1 },
-      { text: "二", value: 2 },
-    ],
-    defaultValue: "",
-  },
-  {
-    value: "param2",
-    optionData: [
-      { text: "全部", value: "" },
-      { text: "一", value: 1 },
-      { text: "二", value: 2 },
-    ],
-    defaultValue: "",
-  },
-]);
-
-const configObj = reactive<ListConfigObject<any>>({
-  hasSearch: true,
-  searchPlaceholder: "关键词搜索",
-  paramConfig,
-  listConfig,
-  getData(pageIndex, pageSize, params, keyword) {
-    return new Promise((resolve, reject) => {
-      let arr: any = [];
-      for (let i = 0; i < 20; i++) {
-        arr.push({
-          name: `name${i}`,
-          status: i % 2,
-        });
-      }
-      setTimeout(() => {
-        resolve({ data: arr, total: 20 });
-      }, 1000);
-    });
-  },
-});
-</script>
-
-<style lang="scss"></style>
-
-```
-
-###### yhm-form
-使用下面的模板创建一个列表
-
-```html
-<template>
-  <yhm-form
-    :options="options"
-    :formData="formData"
-    v-model:verification="verification">
-    <van-button
-      type="primary"
-      :disabled="!verification"
-      block
-      @click="submit">
-      确认
-    </van-button>
-  </yhm-form>
-</template>
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import { ConfigFormItem } from "yh-mobile-components/types";
-
-const formData = reactive<any>({});
-const options = reactive<ConfigFormItem[]>([
-  {
-    label: "数字",
-    type: "number",
-    name: "1",
-    defaultValue: "",
-    config: {},
-    itemChange(val, data) {
-      console.log(val, data);
-    },
-  },
-]);
-const verification = ref(false);
-
-function submit() {
-  if (verification.value) {
-    // 表单验证通过
-  } else {
-    // 表单验证没通过此时按钮也处于无法点击状态
-  }
-}
-</script>
-
-```
-
-###### yhm-info  
-信息展示包裹组件，用来包裹 yhm-info-item。
-
-|属性|必选|类型|说明|  
-|----|----|----|----|    
-|hasTop|否|boolean|是否在组件上方增加一个间隔|
-
-###### yhm-info-item
-信息展示元素组件，必须嵌入 yhm-info-item 使用。
-
-|属性|必选|类型|说明|  
-|----|----|----|----|  
-|span|是|number| 1 - 24的数字|
-|label|否|string|标签名|
-|value|否|number|标签值|
-|description|否|number|标签描述|
-|regularValue|否|number| 是否让值显示黑色 |
-|status|否|StatusType| 是否让值显示黑色 |
-
-```html
-<yhm-info has-top>
-<yhm-info>
-```
-
-###### yhm-datetime
-日期时间选择组件
-
-###### yhm-switch
-开关组件
-
-###### yhm-select
-下拉选择
-
-###### yhm-radio
-单选
-
-###### yhm-checkbox
-多选
+[最新文档地址](http://docs.js.sforcecon.com:5900/view/588)

package/form/yhmCascader.vue

@@ -1,5 +1,83 @@
 <template>
-  <section></section>
+  <van-field
+    class="yhm-cascader-container"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage"
+    :disabled="disabled">
+    <template #input>
+      <div @click="showSignature">
+        <span :class="{ placeholder: !modelValue }">
+          {{ modelText || placeholder }}
+        </span>
+      </div>
+    </template>
+  </van-field>
+  <van-popup
+    class="yhm-cascader-container"
+    v-model:show="isShow"
+    position="bottom">
+    <van-cascader
+      :value-model="modelValue"
+      :title="placeholder"
+      :options="optionData"
+      @close="onCancel"
+      @finish="onFinish" />
+  </van-popup>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss"></style>
+<script setup lang="ts">
+import { ref } from "vue";
+import { vanOption } from "../types";
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+    optionData: vanOption[];
+  }>(),
+  {
+    disabled: false,
+    placeholder: "请选择",
+  }
+);
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: any);
+  (e: "change", val: any);
+}>();
+
+const isShow = ref(false);
+const modelText = ref("");
+function showSignature() {
+  if (!props.disabled) {
+    isShow.value = true;
+  }
+}
+function changeHandler(val) {
+  emits("update:modelValue", val);
+  emits("change", val);
+}
+
+function onFinish({ selectedOptions }) {
+  let value = selectedOptions.map((option) => option.value).join("/");
+  modelText.value = selectedOptions.map((option) => option.text).join("/");
+  changeHandler(value);
+  isShow.value = false;
+}
+function onCancel() {
+  changeHandler("");
+  isShow.value = false;
+}
+</script>
+<style lang="scss">
+.yhm-cascader-container {
+  .van-field__control {
+    justify-content: flex-end;
+    .placeholder {
+      color: var(--van-text-color-3);
+    }
+  }
+}
+</style>

package/form/yhmDateTime/chooseDate.vue

@@ -186,21 +186,21 @@
 </template>
 
 <script setup lang="ts">
-import dayjs, { Dayjs } from "dayjs";
+import dayjs from "dayjs";
 import { ref, computed, watch, onMounted } from "vue";
 import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
     type: "year" | "month" | "date" | "datetime" | "time";
-    modelValue: Dayjs;
+    modelValue: dayjs.Dayjs;
   }>(),
   {}
 );
 
 const emits = defineEmits<{
-  (e: "update:modelValue", date: Dayjs);
-  (e: "change", date: Dayjs);
+  (e: "update:modelValue", date: dayjs.Dayjs);
+  (e: "change", date: dayjs.Dayjs);
 }>();
 
 const divType = ref("day");
@@ -243,7 +243,7 @@ const momentDay = computed(() => {
 const changeType = computed(() => {
   return divType.value === "day" ? "month" : "year";
 });
-const rows = computed<Dayjs[][]>(() => {
+const rows = computed<dayjs.Dayjs[][]>(() => {
   if (divType.value === "day") {
     // 指定月份第一天
     let mMFD = viewDate.value.date(1);
@@ -256,13 +256,13 @@ const rows = computed<Dayjs[][]>(() => {
     } else {
       lastIndex = mMDays - (mMLW - 7);
     }
-    let items: Dayjs[] = [];
+    let items: dayjs.Dayjs[] = [];
     for (let i = firstIndex; i < lastIndex; i++) {
       let day = mMFD.add(i, "day");
       items.push(day);
     }
     let powLen = Math.ceil(items.length / 7);
-    let result: Dayjs[][] = [];
+    let result: dayjs.Dayjs[][] = [];
     for (let j = 0; j < powLen; j++) {
       result.push(items.splice(0, 7));
     }
@@ -271,23 +271,23 @@ const rows = computed<Dayjs[][]>(() => {
     let mMFD = viewDate.value.month();
     let firstIndex = 0 - mMFD;
     let lastIndex = -(mMFD - 12);
-    let items: Dayjs[] = [];
+    let items: dayjs.Dayjs[] = [];
     for (let i = firstIndex; i < lastIndex; i++) {
       let month = viewDate.value.add(i, "month");
       items.push(month);
     }
-    let result: Dayjs[][] = [];
+    let result: dayjs.Dayjs[][] = [];
     for (let j = 0; j < 4; j++) {
       result.push(items.splice(0, 3));
     }
     return result;
   } else {
-    let items: Dayjs[] = [];
+    let items: dayjs.Dayjs[] = [];
     for (let i = -11; i < 13; i++) {
       let year = viewDate.value.add(i, "year");
       items.push(year);
     }
-    let result: Dayjs[][] = [];
+    let result: dayjs.Dayjs[][] = [];
     for (let j = 0; j < 4; j++) {
       result.push(items.splice(0, 3));
     }

package/form/yhmPassword.vue

@@ -76,7 +76,6 @@ const props = withDefaults(
     error?: boolean;
     errorMessage?: string;
     modelValue?: any;
-    scanCallback?: (val) => void;
   }>(),
   {}
 );

package/form/yhmRate.vue

@@ -1,5 +1,61 @@
 <template>
-  <section></section>
+  <van-field
+    class="yhm-rate-container"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage"
+    :disabled="disabled">
+    <template #input>
+      <van-rate
+        :disabled="disabled"
+        :model-value="modelValue"
+        @update:modelValue="changeHandler"
+        :count="count"
+        :size="size"
+        :gutter="gutter"
+        :color="color"
+        :allow-half="allowHalf"
+        :clearable="clearable"></van-rate>
+    </template>
+  </van-field>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss"></style>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+    count?: number;
+    size?: number;
+    gutter?: number;
+    color?: string;
+    allowHalf?: boolean;
+    clearable?: boolean;
+  }>(),
+  {
+    disabled: false,
+    step: 1,
+    min: 1,
+    barHeight: "2px",
+    buttonSize: "24px",
+  }
+);
+
+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-rate-container {
+  .van-field__control {
+    justify-content: flex-end;
+  }
+}
+</style>

package/form/yhmSignature.vue

@@ -1,5 +1,84 @@
 <template>
-  <section></section>
+  <van-field
+    class="yhm-signature-container"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage"
+    :disabled="disabled">
+    <template #input>
+      <span
+        @click="showSignature"
+        class="placeholder"
+        v-if="!modelValue">
+        点击进行签名
+      </span>
+      <img
+        v-else
+        class="signature-image"
+        @click="showSignature"
+        :src="modelValue"
+        alt="签名" />
+    </template>
+  </van-field>
+  <van-popup
+    class="yhm-signature-container"
+    v-model:show="isShow"
+    position="bottom">
+    <van-signature
+      @submit="onSubmit"
+      @clear="onClear"></van-signature>
+  </van-popup>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss"></style>
+<script setup lang="ts">
+import { ref } from "vue";
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+  }>(),
+  {
+    disabled: false,
+  }
+);
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: any);
+  (e: "change", val: any);
+}>();
+
+const isShow = ref(false);
+function showSignature() {
+  if (!props.disabled) {
+    isShow.value = true;
+  }
+}
+function changeHandler(val) {
+  emits("update:modelValue", val);
+  emits("change", val);
+}
+
+function onSubmit({ image }) {
+  changeHandler(image);
+  isShow.value = false;
+}
+function onClear() {
+  changeHandler("");
+  isShow.value = false;
+}
+</script>
+<style lang="scss">
+.yhm-signature-container {
+  .van-field__control {
+    justify-content: flex-end;
+    .placeholder {
+      color: var(--van-text-color-3);
+    }
+    .signature-image {
+      width: auto;
+      max-height: 60px;
+    }
+  }
+}
+</style>

package/form/yhmSlider.vue

@@ -1,5 +1,59 @@
 <template>
-  <section></section>
+  <van-field
+    class="yhm-slider-container"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage"
+    :disabled="disabled">
+    <template #input>
+      <van-slider
+        :disabled="disabled"
+        :model-value="modelValue"
+        @update:modelValue="changeHandler"
+        :step="step"
+        :min="min"
+        :max="max"
+        :bar-height="barHeight"
+        :button-size="buttonSize"></van-slider>
+    </template>
+  </van-field>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss"></style>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+    step?: number;
+    min?: number;
+    max?: number;
+    barHeight?: string;
+    buttonSize?: string;
+  }>(),
+  {
+    disabled: false,
+    step: 1,
+    min: 1,
+    barHeight: "2px",
+    buttonSize: "24px",
+  }
+);
+
+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-slider-container {
+  .van-field__control {
+    justify-content: flex-end;
+  }
+}
+</style>

package/form/yhmStepper.vue

@@ -1,5 +1,56 @@
 <template>
-  <section></section>
+  <van-field
+    class="yhm-stepper-container"
+    v-bind="$attrs"
+    :error="error"
+    :error-message="errorMessage"
+    :disabled="disabled">
+    <template #input>
+      <van-stepper
+        :disabled="disabled"
+        :model-value="modelValue"
+        @update:modelValue="changeHandler"
+        :step="step"
+        :min="min"
+        :max="max"
+        :decimalLength="decimalLength"></van-stepper>
+    </template>
+  </van-field>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss"></style>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    modelValue?: any;
+    step?: number;
+    min?: number;
+    max?: number;
+    decimalLength?: number;
+  }>(),
+  {
+    disabled: false,
+    step: 1,
+    min: 1,
+    decimalLength: 0,
+  }
+);
+
+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-stepper-container {
+  .van-field__control {
+    justify-content: flex-end;
+  }
+}
+</style>

package/info/yhmTable.vue

@@ -43,9 +43,12 @@ const props = withDefaults(
     hasIndex?: boolean;
     columns: ColumnItem[];
   }>(),
+  // @ts-ignore
   {
+    // @ts-ignore
     data: [],
     hasIndex: false,
+    // @ts-ignore
     columns: [],
   }
 );

package/package.json

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

package/types.ts

@@ -20,7 +20,7 @@ export interface ListBtn {
   /** 是否显示
    * @param row 当前行数据
    */
-  show?: (row: T) => boolean;
+  show?: (row) => boolean;
 }
 
 /** 列表对象字段 */