添加切换搜索栏方法

src/App.vue

@@ -144,4 +144,7 @@ export default {
 .loading-container {
   margin: 50px;
 }
+.left-box {
+  transition: all 0.48s;
+}
 </style>

src/containers/Home.vue

+<template>
+  <list-layout>
+    <template slot="filterItem">
+      <search-item label="赠送类型">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+    </template>
+    <template slot="filterBtn">
+      <el-button @click="showSearchBarHandle">qiehuan</el-button>
+    </template>
+  </list-layout>
+</template>
+
+<script>
+import searchMixin from '@/mixins/searchBar';
+
+export default {
+  name: 'Demo',
+  mixins: [searchMixin],
+};
+</script>

src/lib/mixins.js

@@ -12,10 +12,12 @@ import BaseData from '../components/input/BaseDataSelect/mixin';
 import BeanType from '../components/input/BeanTypeSelect/mixin';
 import OperatorOptions from '../components/input/OperatorSelect/mixin';
 import ServiceType from '../components/input/ServiceTypeSelect/mixin';
+import SearchBar from '../mixins/searchBar';
 
 export default {
   Dialog,
   ListPage,
+  SearchBar,
   CampusListPage,
   Operator,
   Admin,

src/mixins/searchBar.js

+export default {
+  data() {
+    return {
+      showAllSearchBar: false,
+      searchBarDom: null,
+      height: 0,
+    };
+  },
+  mounted() {
+    let searchBarDom = document.querySelector('.left-box');
+    let filterItemDom = document.querySelector('.filter-item');
+    this.searchBarDom = searchBarDom;
+    let height =
+      (filterItemDom.clientHeight +
+        parseInt(window.getComputedStyle(filterItemDom)['margin-bottom'])) *
+      2;
+    this.height = height;
+    this.searchBarDom.style = `height: ${height}px;overflow: hidden;max-height: ${height}px`;
+  },
+  methods: {
+    showSearchBarHandle() {
+      if (this.showAllSearchBar) {
+        this.showAllSearchBar = !this.showAllSearchBar;
+        this.searchBarDom.style = `height: ${
+          this.height
+        }px;overflow: hidden;max-height: ${this.height}px`;
+      } else {
+        this.showAllSearchBar = !this.showAllSearchBar;
+        this.searchBarDom.style =
+          'height: auto;overflow: hidden;max-height: 500px';
+      }
+    },
+  },
+};

src/router/index.js

@@ -15,6 +15,7 @@ const constantRouterMap = [
     path: '/',
     name: 'home',
     meta: { title: '首页', icon: HomeIcon },
+    // component: _import('Home'),
     component: { render: h => <router-view /> },
   },
   {