feat: header-popover base layout

lbwa · Sep 29, 2018 · 20324f0 · 20324f0
1 parent 66fd11f
commit 20324f0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -5,27 +5,39 @@
       @click="toggleAside"
     ></i>
     <div class="header__info header__info__align">
-      <div class="info__icon__align info__icon__gutter">
+      <a
+        href="https://github.com/lbwa/vue-design-pro"
+        class="info__icon__align info__icon__gutter"
+        target="_blank"
+      >
         <i class="el-icon-question"></i>
-      </div>
+      </a>
       <div class="info__icon__align info__icon__gutter">
-        <el-badge
-          class="info__dot__face"
-          :value="12"
-        >
-          <i class="el-icon-bell"></i>
-        </el-badge>
+        <header-popover>
+          <el-badge
+            class="info__dot__face"
+            slot="reference"
+            :value="12"
+          >
+            <i class="el-icon-bell"></i>
+          </el-badge>
+        </header-popover>
       </div>
     </div>
   </el-header>
 </template>
 
 <script>
+import HeaderPopover from 'COMPONENTS/HeaderPopover'
 export default {
   methods: {
     toggleAside () {
       this.$emit('toggleAside')
     }
+  },
+
+  components: {
+    HeaderPopover
   }
 }
 </script>
@@ -60,6 +72,10 @@ export default {
     align-items: center
     height: 100%
     cursor: pointer
+    text-decoration: none
+
+    .el-icon-question
+      color: rgba(0,0,0,.65)
 
     &:hover
       background-color: #e6f7ff

diff --git a/src/components/HeaderPopover.vue b/src/components/HeaderPopover.vue
@@ -0,0 +1,28 @@
+<template>
+  <el-popover
+    class="popover"
+    placement="top-start"
+    trigger="click"
+  >
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="通知" name="notification">通知</el-tab-pane>
+      <el-tab-pane label="消息" name="message">消息</el-tab-pane>
+      <el-tab-pane label="待办" name="todo">待办</el-tab-pane>
+    </el-tabs>
+    <slot name="reference" slot="reference"></slot>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      activeName: 'notification'
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+
+</style>