jlst-new-company/src/layout/common/top.vue

<template>
  <div id="top">
    <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-arrow="leftArrow" @click-left="upBack">
        <template #left>
          <span v-if="leftArrow">
            <van-icon name="arrow-left" />
            <span style="color: #409eff">返回</span>
          </span>
        </template>
      </van-nav-bar>
    </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 :span="24" class="four" v-else-if="topType == '4'">
      <el-col :span="4" class="back" @click.native="upBack"> <van-icon name="arrow-left" />返回 </el-col>
      <el-col :span="16" class="title">
        {{ $route.meta.title }}
      </el-col>
      <el-col :span="4" class="add">
        <van-button icon="plus" size="small" type="info" round @click="add" />
      </el-col>
    </el-col>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'top',
  props: {
    topType: { type: String, default: () => '1' },
    // 只有类型为2时，有用
    leftArrow: { type: Boolean, default: () => true },
  },
  components: {},
  data: function () {
    return {
      searchName: '',
    };
  },
  created() {},
  methods: {
    // 查询
    search() {
      this.$emit('search', { searchName: this.searchName });
    },
    // 返回
    upBack() {
      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>
.one {
  /deep/.van-search {
    padding: 3px 5px;
  }
}
.two {
  /deep/.van-nav-bar__content {
    height: 40px;
  }
  /deep/.van-icon {
    top: 2px;
  }
}
.thr {
  .back {
    color: #409eff;
    padding: 8px 0;
    text-align: center;
    .van-icon {
      top: 3px;
    }
  }
  .search {
    /deep/.van-search {
      padding: 2px 5px 2px 0px;
    }
  }
}
.four {
  .back {
    color: #409eff;
    padding: 8px 0;
    text-align: center;
    .van-icon {
      top: 3px;
    }
  }
  .title {
    text-align: center;
    padding: 9px 0;
  }
  .add {
    text-align: center;
    padding: 4px 0;
  }
}
</style>