web-mobile/src/layout/list-layout.vue

<template>
  <div id="list-layout">
    <el-container direction="vertical" style="width:100%;height:100%;background: #f0f2f5;">
      <el-header class="toZero" v-if="needSearch">
        <el-row :gutter="1" type="flex" justify="center" class="search_row">
          <el-col :span="20">
            <el-input v-model="searchVal" size="medium" :placeholder="searchPlaceHolder" prefix-icon="el-icon-search" @input="toSearch('sync')"></el-input>
          </el-col>
          <el-col :span="3" :offset="1" class="btn_col">
            <span class="search_btn" @click="toSearch('search')">搜索</span>
          </el-col>
        </el-row>
      </el-header>
      <el-header v-else style="height:2.5rem">
        <el-row class="title">
          <el-col :span="24" style="text-align:center;">{{ title }}</el-col>
        </el-row>
      </el-header>
      <el-main class="toZero">
        <listContent v-on="$listeners" :hasMore="hasMore" v-if="needInfinteLoading">
          <template v-slot:list>
            <slot name="content"></slot>
          </template>
        </listContent>
        <slot name="content" v-else></slot>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import listContent from '@/components/list-components/list.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'list-layout',
  props: {
    needSearch: { type: Boolean, default: true },
    searchPlaceHolder: { type: String },
    needInfinteLoading: { type: Boolean, default: true },
    hasMore: { type: Boolean },
    searchName: { type: String },
    title: null,
  },
  components: {
    listContent,
  },
  data: () => ({
    searchVal: '',
  }),
  created() {},
  computed: {},
  methods: {
    toSearch(type) {
      let data;
      if (this.searchName) {
        data = {};
        data[`${this.searchName}`] = this.searchVal;
      } else {
        data = this.searchVal;
      }
      this.$emit('searchBar', { type: type, value: data });
    },
  },
};
</script>

<style lang="less" scoped>
.toZero {
  margin: 0;
  padding: 0;
}
.search_row {
  padding: 0.55rem;
  &:last-child {
    margin-bottom: 0;
  }
}
.title {
  padding: 0.3rem;
}
.search_btn {
  background: #f0f2f5;
  color: #333333;
  border: 0;
  font-size: 16px;
  font-weight: 500;
}
.btn_col {
  padding-top: 0.5rem;
}
</style>