article-mobile/src/layout/common/top.vue

<template>
  <div id="top">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one" v-if="topType == '1'">
          <van-search v-model="searchName" placeholder="请输入信息标题" @search="search" />
        </el-col>
        <el-col :span="24" class="two" v-else-if="topType == '2'">
          <van-nav-bar :title="this.$route.meta.title" left-text="返回" left-arrow @click-left="upBack" />
        </el-col>
        <el-col :span="24" class="thr" v-else-if="topType == '3'">
          <el-col :span="4" class="back" @click.native="upBack"> <van-icon name="arrow-left" />返回 </el-col>
          <el-col :span="20" class="search">
            <van-search v-model="searchName" placeholder="请输入赠与人名称" @search="search" />
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'top',
  props: {
    topType: { type: String, default: () => '1' },
  },
  components: {},
  data: function() {
    return {
      searchName: '',
    };
  },
  created() {},
  methods: {
    // 查询
    search() {
      this.$emit('search', { searchName: this.searchName });
    },
    // 返回
    upBack() {
      this.$emit('upBack');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    /deep/.van-search {
      padding: 3px 5px;
    }
  }
  .two {
    /deep/.van-nav-bar__content {
      height: 40px;
    }
  }
  .thr {
    .back {
      color: #409eff;
      padding: 8px 0;
      text-align: center;
      .van-icon {
        top: 3px;
      }
    }
    .search {
      /deep/.van-search {
        padding: 2px 5px 2px 0px;
      }
    }
  }
}
</style>