GCLS_Page_TC/src/components/teacher-dev/HeaderOne.vue

<template>
  <div class="HeaderOne">
    <div>
      <span :class="[language_type == 'AR' ? 'albbefor' : 'befor']" @click="backHome">
        <img src="../../assets/teacherdev/Frame3.png" alt="" />
      </span>
      <template v-if="allList">
        <span>
          <img src="../../assets/teacherdev/Frame2759.png" alt="" />
        </span>
        <span class="text" @click="back"> <!-- 全部列表 -->{{ this.$t("Key572") }} </span>
      </template>
      <span>
        <img src="../../assets/teacherdev/Frame2759.png" alt="" />
      </span>
      <span class="text">{{ text }}</span>
    </div>
    <div>
      <div class="seek" @keyup="keyDownSeekData">
        <el-input
          type="text"
          name=""
          id=""
          :placeholder="$t('Key43')"
          v-model="SeekName"
          @change="SeekName = SeekName.trim()"
          maxlength="50"
        />
        <img @click="gotoSeekResult" src="../../assets/teacherdev/Group2149.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { mapGetters } from "vuex";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["type", "text", "changeKeycode", "keycode", "allList"],
  data() {
    //这里存放数据
    return {
      SeekName: "",
      AllList: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapGetters(["language_type"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    backHome() {
      this.$router.push("/");
    },
    back() {
      this.$router.back();
    },
    // 前往搜索结果
    gotoSeekResult() {
      if (this.SeekName != "") {
        // 是不是在搜索结果页面不是则跳转
        this.SeekName = this.SeekName.trim();
        if (this.$route.name == "Viewmore") {
          this.changeKeycode(this.SeekName);
        } else {
          this.$router.push({
            path: "/Viewmore",
            query: { keyWord: this.SeekName, id: this.$route.query.id },
          });
        }
      } else {
        this.$message.warning(this.$t("Key46")); //请输入内容
      }
    },
    // 回车搜索
    keyDownSeekData(e) {
      if (e.keyCode == 13) {
        if (this.SeekName != "") {
          this.SeekName = this.SeekName.trim();
          if (this.$route.name == "Viewmore") {
            this.changeKeycode(this.SeekName);
            this.$router.replace({
              path: "/Viewmore",
              query: {
                keycode: this.SeekName,
              },
            });
          } else {
            this.$router.push({
              path: "/Viewmore",
              query: { keyWord: this.SeekName, id: this.$route.query.id },
            });
          }
        } else {
          this.$message.warning(this.$t("Key46")); //请输入内容
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.keycode) {
      this.SeekName = this.keycode;
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.HeaderOne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 120px 0 24px;
  height: 64px;
  background: #fff;
  >:first-child {
    display: flex;
    align-items: center;
    > span {
      margin-left: 15px;
      cursor: pointer;
      img {
        width: 24px;
      }
    }
    .befor,
    .albbefor {
      img {
        width: 24px;
      }
    }
    .befor::before {
      content: "|";
      width: 6px;
      height: 24px;
      color: #ff9900;
      background: #ff9900;
      position: relative;
      right: 10px;
    }
    .albbefor::before {
      content: "|";
      width: 6px;
      height: 24px;
      color: #ff9900;
      background: #ff9900;
      position: relative;
      left: 10px;
    }
    .text {
      font-weight: bold;
      font-size: 16px;
      color: #2c2c2c;
    }
  }
  .seek {
    width: 300px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    input {
      width: 90%;
      border: none;
      outline: none;
      margin-left: 5px;
    }
    img {
      width: 18px;
      height: 18px;
    }
  }
}
</style>
<style lang="scss">
.seek {
  .el-input__inner {
    border: none;
    height: 38px;
    padding: 0;
  }
}
</style>