frame/src/components/mobile-frame/mobile-main.vue

<template>
  <div id="mobile-main">
    <van-row>
      <van-col span="24" class="main" :style="{ height: client.height + 'px' }">
        <van-col span="24" class="top" v-if="useTop">
          <top :topType="topType" @search="topSearch" :leftArrow="leftArrow" @back="back" :rightArrow="rightArrow" @add="add">
            <template v-slot:top>
              <slot name="slotTop"></slot>
            </template>
          </top>
        </van-col>
        <van-col span="24" class="info" :style="{ height: getHeight() }">
          <slot name="info"></slot>
        </van-col>
        <van-col span="24" class="page" v-if="usePage">
          <page :limit="limit" :total="total" @search="search"></page>
        </van-col>
        <van-col span="24" class="foot" v-if="useNav"><foot :menuList="menuList"></foot></van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import top from './top.vue';
import page from './page.vue';
import foot from './foot.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'mobile-main',
  props: {
    // 头部
    useTop: { type: Boolean, default: () => true },
    topType: { type: String, default: () => '1' },
    leftArrow: { type: Boolean, default: () => true },
    rightArrow: { type: Boolean, default: () => true },
    // 分页
    usePage: { type: Boolean, default: () => true },
    limit: { type: Number, default: () => 10 },
    total: { type: Number, default: () => 0 },
    // 底部菜单
    useNav: { type: Boolean, default: () => true },
  },
  components: {
    top,
    page,
    foot,
  },
  data: function() {
    return {
      client: {},
      menuList: [
        { name: '首页1', index: '/', icon: 'after-sale' },
        { name: '首页2', index: '/index', icon: 'cart-o' },
      ],
    };
  },
  created() {},
  methods: {
    // 头部名称查询
    topSearch(searchName) {
      this.$emit('search', searchName);
    },
    // 分页查询
    search(skip) {
      this.$emit('search', skip);
    },
    // 返回
    back() {
      this.$emit('back');
    },
    // 添加
    add() {
      this.$emit('add');
    },
    // 计算中间高度
    getHeight() {
      let windowH = this.client.height;
      if (this.useTop) windowH = windowH - 45;
      else windowH = windowH - 0;
      if (this.usePage) windowH = windowH - 40;
      else windowH = windowH - 0;
      if (this.useNav) windowH = windowH - 50;
      else windowH = windowH - 0;
      return windowH + 'px';
    },
  },
  mounted() {
    let client = {
      height: document.documentElement.clientHeight || document.body.clientHeight,
      width: document.documentElement.clientWidth || document.body.clientWidth,
    };
    this.$set(this, `client`, client);
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>