client-base-v5/src/client/TopNavigation.vue

<template>
  <div>
    <div>
      <nav class="navbar navbar-default navBack">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar" />
              <span class="icon-bar" />
              <span class="icon-bar" />
            </button>
            <a
              class="navbar-brand"
              
              @click="showMenu"
            >
              <i v-if="visible == false" class="glyphicon glyphicon-chevron-right" />
              <i v-if="visible" class="glyphicon glyphicon-chevron-left" />
            </a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div
            id="bs-example-navbar-collapse-1"
            class="collapse navbar-collapse"
          >
            <TopNavUserInfo :login-info="loginInfo" />
            <TopNavClientSelect :login-info="loginInfo" />
            <TopNavMessage :login-info="loginInfo" />
            <TopNavVideoCallCenter />
            <TopNavDownload />
            <LoginNotice />
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
        <div class="clearfix" />
      </nav>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';
import AuthImage from '../widget/AuthImage.vue';
import TopNavClientSelect from './top-nav-client-select.vue';
import TopNavUserInfo from './top-nav-user-info.vue';
import TopNavMessage from './top-nav-message.vue';
import TopNavVideoCallCenter from './top-nav-video-call-center.vue';
import TopNavDownload from './top-nav-download.vue';
import LoginNotice from './LoginNotice.vue';

export default {
  components: {
    AuthImage,
    TopNavClientSelect,
    TopNavUserInfo,
    TopNavMessage,
    TopNavVideoCallCenter,
    TopNavDownload,
    LoginNotice,
  },
  emits: ['menuVisibleChanged'],
  data: function () {
    this.Common = Common;
    return {
      loginInfo: '',
      webSocket: undefined,
      clientCanAccessList: [],
      visible:true,
    };
  },

  watch: {},

  mounted: function () {
    this.getLocalStorage();
    if (this.isMobile()) {
      this.visible = false;
      this.$emit('menuVisibleChanged');
    }
  },

  methods: {
    // 获取localStorage
    getLocalStorage: function () {
      var json = localStorage.getItem('#LoginInfo');
      this.loginInfo = JSON.parse(json);
      if (this.loginInfo && this.loginInfo.userImageUrl) {
        this.$store.commit('updateImageSrc', this.loginInfo.userImageUrl);
      }
    },
    showMenu:function(){
      this.visible = !this.visible;
      this.$emit('menuVisibleChanged');
    },
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    },
  },
};
</script>

<style scoped>
@media (max-width: 768px) {
.navBack{
  z-index: 9999999;
}
}
</style>