yh-mobile-components 1.4.10 → 1.4.12

package/form/yhmMultipleSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <van-field
+    v-model="result"
+    is-link
+    readonly
+    name="picker"
+    :label="label"
+    :placeholder="placeholder"
+    @click="showPicker = true" />
+  <van-popup
+    v-model:show="showPicker"
+    :close-on-click-overlay="closeonclickoverlay"
+    :position="position">
+    <van-cell-group>
+      <van-cell>
+        <van-button
+          type="primary"
+          @click="cancelCheck"
+          style="width: 20%; float: left; border-radius: 10px">
+          取消
+        </van-button>
+        <van-button
+          type="primary"
+          @click="finishCheck"
+          style="width: 20%; float: right; border-radius: 10px">
+          确定
+        </van-button>
+      </van-cell>
+      <van-cell>
+        <van-checkbox
+          v-model="isCheckAll"
+          :indeterminate="isIndeterminate"
+          @change="checkAllChange">
+          全选
+        </van-checkbox>
+      </van-cell>
+      <van-checkbox-group
+        ref="checkboxGroup"
+        v-model="checkedResult"
+        @change="checkedResultChange"
+        direction="vertical">
+        <van-cell-group>
+          <van-cell v-for="item in columns">
+            <van-checkbox :name="item.value">
+              {{ item.text }}
+            </van-checkbox>
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </van-cell-group>
+  </van-popup>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { CheckboxGroupInstance } from "vant";
+
+// props: ["label", "placeholder", "position", "resullt", "columns"];
+
+interface ListItem {
+  value: string | number;
+  text: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    placeholder?: string;
+    position?: string;
+    columns?: Array<ListItem>;
+    closeonclickoverlay?: boolean;
+  }>(),
+  {
+    label: "",
+    placeholder: "请选择",
+    position: "",
+    columns: () => [] as ListItem[],
+    closeonclickoverlay: false,
+  }
+);
+
+const emits = defineEmits<{
+  (e: "update:modelValue", val: object);
+}>();
+
+const position = ref("bottom");
+const result = ref("");
+const showPicker = ref(false);
+const checkedResult = ref([]);
+const isCheckAll = ref(false);
+const isIndeterminate = ref(false);
+const checkboxGroup = ref<CheckboxGroupInstance>();
+
+function checkAllChange(val: boolean) {
+  if (val) {
+    checkboxGroup.value?.toggleAll(true);
+  } else {
+    checkboxGroup.value?.toggleAll();
+  }
+}
+
+function checkedResultChange(value: string[]) {
+  const checkedCount = value.length;
+  isCheckAll.value = checkedCount == props.columns.length;
+  isIndeterminate.value = checkedCount > 0 && checkedCount < props.columns.length;
+}
+
+function cancelCheck() {
+  checkboxGroup.value?.toggleAll();
+  showPicker.value = false;
+}
+function finishCheck() {
+  emits("update:modelValue", checkedResult.value);
+  result.value = checkedResult.value.join("、");
+  showPicker.value = false;
+}
+</script>

package/info/yhmList.vue

@@ -10,7 +10,8 @@
         v-if="hasSearch"
         v-model="keyword"
         :placeholder="searchPlaceholder"
-        @update:model-value="getList(true)"
+        @update:model-value="onSearch('update')"
+        @search="onSearch('search')"
         :clearable="false"></van-search>
       <van-dropdown-menu v-if="(dropdownParamsConfig && dropdownParamsConfig.length) || (customParamsConfig && customParamsConfig.length)">
         <yhm-dropdown-item
@@ -79,12 +80,14 @@
 <script setup lang="ts">
 import type { ListConfig, ParamConfig } from "../types";
 import type { ListInstance } from "vant";
-import { ref, reactive, computed, watch, onMounted, onActivated } from "vue";
+import { ref, reactive, computed, watch, onMounted, onActivated, nextTick } from "vue";
 
 const props = withDefaults(
   defineProps<{
     /** 是否有关键字筛选 */
     hasSearch?: boolean;
+    /** 筛选搜索触发类型 默认 update当输入框内容发生变化时触发 search点击键盘上的搜索/回车按钮后触发 */
+    searchType?: "update";
     /** 关键字筛选提示语 */
     searchPlaceholder?: string;
     paramType?: "dropdown" | "tabs";
@@ -115,6 +118,12 @@ const props = withDefaults(
 
 const scrollContent = ref<ListInstance>();
 const keyword = ref("");
+function setKeyowrd(k) {
+  keyword.value = k;
+  nextTick(() => {
+    getList(true);
+  });
+}
 const params = reactive({});
 const list = ref<any[]>([]);
 const listLoading = ref(false);
@@ -187,6 +196,12 @@ async function getList(isClear = false) {
   }, 500);
 }
 
+function onSearch(type) {
+  if (props.searchType == type) {
+    getList(true);
+  }
+}
+
 watch(
   () => params,
   () => {
@@ -236,7 +251,7 @@ onActivated(() => {});
 
 defineExpose({
   getList,
-  keyword,
+  setKeyowrd,
 });
 </script>
 <style lang="scss">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-mobile-components",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "移动端组件封装及配置化需求",
   "main": "index.js",
   "scripts": {
@@ -11,4 +11,4 @@
     "vant": "4.8.1"
   },
   "author": "Liubin"
-}
+}