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

<template>
  <div id="top">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="common type_1" v-if="topType == '1'">
          <van-search v-model="searchName" placeholder="请输入信息标题" @search="search" />
        </van-col>
        <van-col span="24" class="common type_2" v-else-if="topType == '2'">
          <van-nav-bar :title="this.$route.meta.title">
            <template #left>
              <van-col span="24" v-if="leftArrow" @click="back" class="leftArrow">
                <van-icon name="arrow-left" />
                <span>返回</span>
              </van-col>
            </template>
            <template #right>
              <van-col span="24" v-if="rightArrow" @click="add"><van-icon name="plus"/></van-col>
            </template>
          </van-nav-bar>
        </van-col>
        <van-col span="24" class="common type_3" v-else-if="topType == '3'">
          <van-col span="4" class="left" @click.native="back">
            <van-icon name="arrow-left" />
            <span>返回</span>
          </van-col>
          <van-col span="20" class="right">
            <van-search v-model="searchName" placeholder="请输入信息标题" @search="search" />
          </van-col>
        </van-col>
        <van-col span="24" class="common type_4" v-else-if="topType == '4'">
          <slot name="top"></slot>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'top',
  props: {
    topType: { typ: String },
    leftArrow: { typ: Boolean },
    rightArrow: { typ: Boolean },
  },
  components: {},
  data: function() {
    return {
      searchName: '',
    };
  },
  created() {},
  methods: {
    // 搜索
    search() {
      this.$emit('search', { searchName: this.searchName });
    },
    // 返回
    back() {
      this.$emit('back');
    },
    // 添加
    add() {
      this.$emit('add');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .common {
    height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
  }
  .type_1 {
    padding: 5px;
    /deep/.van-search {
      padding: 0;
    }
  }
  .type_2 {
    .leftArrow {
      span {
        color: #409eff;
        position: relative;
        top: 0;
      }
    }
  }
  .type_3 {
    padding: 5px;
    /deep/.van-search {
      padding: 0;
    }
    .left {
      color: #409eff;
      font-size: 15px;
      text-align: center;
      padding: 8px 0;
      span {
        position: relative;
        top: -2px;
      }
    }
  }
}
</style>