فهرست منبع

内嵌筛选逻辑,slot改为具名插槽

xiaohaizhao 1 سال پیش
والد
کامیت
261e24279d
1فایلهای تغییر یافته به همراه28 افزوده شده و 6 حذف شده
  1. 28 6
      components/My_search.vue

+ 28 - 6
components/My_search.vue

@@ -1,17 +1,20 @@
 <template>
     <view class="My_search">
-        <slot></slot>
+        <slot name="left" />
         <u-search v-model="value" :showAction="false" @search="onSearch" @custom="onSearch" @clear="onSearch"
             :placeholder="placeholder" />
-        <view v-if="isFilter" @click="onFilter" class="filtrate" hover-class="navigator-hover">
+        <view v-if="isFilter" @click="startFilter" class="filtrate" hover-class="navigator-hover">
             <text class="iconfont icon-shaixuan" />筛选
         </view>
+        <My_filter ref="filter" :filter1="filter" @onConfirm="onConfirm" />
     </view>
 </template>
 
 <script>
+import My_filter from "./My_filter.vue";
 export default {
     name: 'My_search',
+    components: { My_filter },
     props: {
         placeholder: {
             type: String,
@@ -22,7 +25,19 @@ export default {
             default: true
         },
         startSearch: Function,
-        openFilter: Function,
+        onFilter: Function,
+        customFiltering: {
+            type: Boolean,
+            default: false
+        },
+        filter: {
+            type: Array,
+            default: () => []
+        },
+        heightReduction: {
+            type: Number,
+            default: 0
+        }
     },
     data() {
         return {
@@ -33,9 +48,16 @@ export default {
         onSearch(value) {
             this.$emit("startSearch", value)
         },
-        onFilter() {
-            this.$emit("openFilter")
-        }
+        startFilter() {
+            if (this.customFiltering) return this.$emit("onFilter");
+            this.$refs.filter.open(this.heightReduction);
+        },
+        onConfirm(res) {
+            this.$emit("onFilter", res)
+        },
+        onFinish() {
+            this.$refs.filter.close();
+        },
     },
 }
 </script>