Ver Fonte

去除alert

wangtao há 2 anos atrás
pai
commit
6038fec84a
2 ficheiros alterados com 236 adições e 1 exclusões
  1. 235 0
      src/assets/styles/Navbar.vue
  2. 1 1
      src/layout/components/Navbar.vue

+ 235 - 0
src/assets/styles/Navbar.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="navbar">
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+
+    <div class="right-menu">
+
+      <template v-if="device!=='mobile'">
+        <span class="date" >{{date}}</span>
+        <search id="header-search" class="right-menu-item" />
+
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+
+      </template>
+
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+        <div class="avatar-wrapper">
+          {{$store.state.user.nickName}}
+          <!-- <img :src="avatar" class="user-avatar"> -->
+        </div>
+        <div class="logout"  @click="logout">
+          <span>安全退出</span>
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <!-- <router-link to="/user/profile">
+            <el-dropdown-item>个人中心</el-dropdown-item>
+          </router-link> -->
+          <!-- <el-dropdown-item @click.native="setting = true">
+            <span>布局设置</span>
+          </el-dropdown-item> -->
+          <!-- <el-dropdown-item divided @click.native="logout">
+            <span>安全退出</span>
+          </el-dropdown-item> -->
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import TopNav from '@/components/TopNav'
+import Hamburger from '@/components/Hamburger'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import Search from '@/components/HeaderSearch'
+
+export default {
+  data(){
+    return{
+      date: new Date(),
+    }
+  },
+  components: {
+    Breadcrumb,
+    TopNav,
+    Hamburger,
+    Screenfull,
+    SizeSelect,
+    Search,
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'device'
+    ]),
+    setting: {
+      get() {
+        return this.$store.state.settings.showSettings
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val
+        })
+      }
+    },
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
+      }
+    },
+
+  },
+  mounted(){
+    let that= this;
+    this.timer = setInterval(function() {
+        let myDate = new Date()
+        let year = myDate.getFullYear() + '年'
+        let month = myDate.getMonth() + 1 +'月'
+        let day = myDate.getDate()  +'日'
+        let hours = myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours();
+        let minutes = myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes();
+        let seconds = myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds();
+        let sfb = hours + ':' + minutes + ':' + seconds
+        that.date = year + month + day + ' ' + sfb
+    });
+
+  },
+  //销毁时清除计时器
+  // beforeDestroy: function () {
+  //     if (this.timer) {
+  //       clearInterval(this.timer)
+  //     }
+  // },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+
+      this.$confirm('确定注销并退出系统吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('LogOut').then(() => {
+          location.href = '/vuedx/';
+        })
+      }).catch(() => {});
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .topmenu-container {
+    position: absolute;
+    left: 50px;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 10px;
+      font-size: 16px;
+      .avatar-wrapper {
+        margin-top: 0px;
+        position: relative;
+        display: inline-block;
+        cursor: default;
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+      .logout{
+        margin: 0px 0 0 20px;
+        position: relative;
+        display: inline-block;
+        z-index: 1;
+      }
+    }
+  }
+}
+.date{
+  width:250px;
+  margin-right: 20px;
+  vertical-align: top;
+
+}
+</style>

+ 1 - 1
src/layout/components/Navbar.vue

@@ -117,7 +117,7 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
-      alert(1)
+
       this.$confirm('确定注销并退出系统吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',