yh-mobile-components 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -1,2 +1,3 @@
+- v1.3.4 yhm-select 修复 进行确认操作时，值不更新的问题
 - v1.3.2 yhm-input 修复 input 框没有 focus方法的问题
 - v1.3.1 yhm-select 修复值域下拉选项不匹配导致报错的问题

package/form/yhmSelect.vue

@@ -1,13 +1,13 @@
 <template>
   <van-field
-    class="yhm-datetime-container"
+    class="yhm-select-container"
     :disabled="disabled"
     v-bind="$attrs"
     :error="error"
     :error-message="errorMessage">
     <template #input>
       <div
-        class="yhm-datetime-value"
+        class="yhm-select-value"
         :class="valueClass"
         @click="toChoose">
         {{ valueString }}
@@ -16,27 +16,42 @@
   </van-field>
   <van-popup
     v-model:show="show"
-    class="yhm-datetime-container"
+    class="yhm-select-container"
     position="bottom">
     <van-picker
       :title="palceholder"
-      :columns="optionData"
-      @confirm="onCancel"
-      @cancel="onCancel"
-      @change="onChange" />
+      :columns="filterOptionData"
+      :modelValue="[modelValue]"
+      ref="pickerRef"
+      @confirm="onComfirm"
+      @cancel="onCancel">
+      <template
+        #title
+        v-if="filterabled">
+        <input
+          class="yhm-select-filter-input"
+          placeholder="输入关键词筛选"
+          type="text"
+          v-model="filterKeyword"
+          @input="filterChange" />
+      </template>
+    </van-picker>
   </van-popup>
 </template>
 <script setup lang="ts">
 import { ref, computed } from "vue";
 
-const props = withDefaults(defineProps<{ error?: boolean; errorMessage?: string; modelValue?: any; disabled?: boolean; palceholder?: string; optionData: any[] }>(), {
+const props = withDefaults(defineProps<{ error?: boolean; errorMessage?: string; modelValue?: any; disabled?: boolean; palceholder?: string; optionData: any[]; filterabled: boolean; remoteFilter: boolean }>(), {
   disabled: false,
+  filterabled: false,
+  remoteFilter: false,
   palceholder: "请选择",
 });
 
 const emits = defineEmits<{
   (e: "update:modelValue", val: string);
   (e: "change", val: string);
+  (e: "filter", val: string);
 }>();
 
 const valueString = computed(() => {
@@ -55,6 +70,29 @@ const valueClass = computed(() => {
 });
 
 const show = ref(false);
+const pickerRef = ref();
+
+const filterKeyword = ref("");
+const filterOptionData = computed(() => {
+  if (props.filterabled && !props.remoteFilter) {
+    return props.optionData.filter(({ text, value }) => {
+      return text.indexOf(filterKeyword.value) > -1 || value.indexOf(filterKeyword.value) > -1;
+    });
+  } else {
+    return props.optionData;
+  }
+});
+let filterTimer = null;
+function filterChange() {
+  if (filterTimer) {
+    clearTimeout(filterTimer);
+    filterTimer = null;
+  }
+  // @ts-ignore
+  filterTimer = setTimeout(() => {
+    emits("filter", filterKeyword.value);
+  }, 300);
+}
 
 function toChoose() {
   if (props.disabled) {
@@ -63,17 +101,22 @@ function toChoose() {
   show.value = true;
 }
 
-function onChange({ selectedValues }) {
-  emits("update:modelValue", selectedValues[0]);
-}
+// function onChange({ selectedValues }) {
+//   emits("update:modelValue", selectedValues[0]);
+// }
 function onCancel() {
   show.value = false;
 }
+
+function onComfirm({ selectedValues }) {
+  emits("update:modelValue", selectedValues[0]);
+  onCancel();
+}
 </script>
 <style lang="scss">
-.yhm-datetime-container {
+.yhm-select-container {
   --van-switch-width: calc(3em + 4px);
-  .yhm-datetime-value {
+  .yhm-select-value {
     flex: 1;
     width: 100%;
     text-align: right;
@@ -83,6 +126,13 @@ function onCancel() {
   }
   &.van-popup {
     height: 560px;
+    .yhm-select-filter-input {
+      flex: 1;
+      line-height: 30px;
+      font-size: 12px;
+      border: 1px solid var(--van-border-color);
+      padding: 0 8px;
+    }
   }
 }
 </style>

package/package.json

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