yiyunjianzhu-vue/src/App.vue

<!--
 * @Description: 项目入口组件
 * @version: V1.0
 * @Author: xzx
 * @Date: 2019-11-04 17:22:44
 * @LastEditors  : xzx
 * @LastEditTime : 2020-01-08 16:47:56
 -->
<template>
  <div id="app">
    <!-- <Header
      :v-show="header_show"
      ref="mychild"
      :showHelp="showHelpPage"
      :showIndexOption="showIndexOption"
      @closeShowOption="closeShowOption"
      @closeWorkSet="closeWorkSet"
      @searchName="getSearchName"
      :isShowOutWorkSpace="isShowOutWorkSpace"
      @outWorkSpace="getOutWorkSpace"
      id="bignav"
    ></Header> -->
    <!-- 
      
      @showOption="showOption"
      @showHelp="showHelp"
      :searchName="searchName"
      @isShowOutWorkSpace="getIsShowOutWorkSpace"
      :outWorkSpace="outWorkSpace"
     -->
    <router-view
      ref="mainpage"
      :class="{setMarginTop, 'workspace-bigbody': $route.path.indexOf('/workspace') >=0}"
      id="bigbody"
      class="mt-48"
    ></router-view>
  </div>
</template>
<script>
// import Header from "@/views/components_web/head/head.vue";
import system from "@/services/system";
export default {
  components: {
    // Header,
  },
  name: "App",
  data() {
    return {
      header_show: true,
      companyName: "",
      mypath: "/",
      showIndexOption: false, //index.vue里的意见反馈
      showHelpPage: false, //index.vue里的帮助
      searchName: "",
      isShowOutWorkSpace: false,
      outWorkSpace: false,
      isClient: system.isClient,
    };
  },
  created: function () {
    if (
      document.getElementById("Loading") != null &&
      document.getElementById("Loading").nodeName != null &&
      document.getElementById("Loading").nodeName != ""
    ) {
      document.body.removeChild(document.getElementById("Loading"));
    }
    if (this.$route.name == "login" || this.$route.name == "notfound" || this.$route.name === 'platform') {
      this.header_show = false;
    }
  },
  computed: {
    setMarginTop() {
      return this.isClient ? 'mt-60' : 'mt-40';
    }
  },
  mounted: function () {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    /**
     * 检测bigbody滚动距离添加样式
     */
    handleScroll: function () {
      // let scrollBody = document.getElementById("bigbody");
      // let scrollnav = document.getElementById("bignav");
      // if (scrollBody.scrollTop > 0) {
      //   scrollnav.classList.add("scorllbaron");
      // } else {
      //   scrollnav.classList.remove("scorllbaron");
      // }
    },
    /**
     * @description: 打开意见反馈弹框
     * @param {type}
     * @return:
     */
    showOption: function () {
      this.showIndexOption = true;
    },
    /**
     * @description: 打开帮助弹框
     * @param {type}
     * @return:
     */
    showHelp: function () {
      this.showHelpPage = true;
    },
    /**
     * @description: 关闭意见反馈弹框
     * @param {type}
     * @return:
     */
    closeShowOption: function () {
      this.showIndexOption = false;
      this.showHelpPage = false;
    },
    closeWorkSet: function () {
      if (this.$route.name == "workspace") {
        this.$refs["mainpage"].closeAppManagePain();
      }
    },
    /**
     * 获取全局搜索的值
     * */
    getSearchName(data) {
      this.searchName = data;
    },
    /**
     * 获取是否显示 回到协作空间 的值
     * */
    getIsShowOutWorkSpace(data) {
      this.outWorkSpace = false;
      this.isShowOutWorkSpace = data;
    },
    /**
     * 获取 点击回到协作空间后的动作
     * */
    getOutWorkSpace(data) {
      this.outWorkSpace = data;
    },
  },
  beforeDestroy() {
    // 销毁监听
    window.removeEventListener("scroll", this.handleScroll);
  },
  watch: {
    $route(to) {
      this.mypath = to.path;
    },
  },
};
</script>

<style lang="scss">
jmnode {
  border: none;
  box-shadow: 0 1px 2px 0 rgba(#000, 0.2);
  border-radius: 4px;
  &:hover {
    box-shadow: none;
    border: 2px solid rgba(#7850FF, 1);
  }
  &.selected {
    box-shadow: none;
    border: 2px solid rgba(#7850FF, 1);
    background-color: #fff;
    color: #333;
  }
}

.workspace-bigbody {
  overflow: hidden !important;
}
</style>

<style lang="scss" scoped>
  .mt-40 {
    margin: 40px 0 0 0;
  }
  .mt-60 {
    margin: 60px 0 0 0;
  }
</style>