Vue頁面右上角實現(xiàn)懸浮隱藏菜單欄步驟詳解

/*父組件自定義元素綁定switch-show事件*/
<t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
// 父組件js
methods: {
 //會被子組件$emit觸發(fā)的方法
 switchShow(val) {
 this.showCancel = val;
 }
}
// 子組件js
methods: {
 //按鈕上的綁定click事件
 switchCancelBoard() {
 this.$emit("switch-show", this.ifShowCancel);
 }
}

/*父組件*/
<template>
 <p id="app" @click="hideCancel">
 <t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
 <!-- <router-view/> -->
 </p>
</template>
<script>
 import THeader from "./components/t-header/t-header";
 export default {
 name: "app",
 components: {
 THeader
 },
 data() {
 return {
 showCancel: false
 };
 },
 methods: {
 hideCancel() {
 this.showCancel = false;
 },
 switchShow(val) {
 this.showCancel = val;
 }
 }
 };
</script>
<style scope lang="stylus">
</style>
/*子組件*/
<template>
 <p class="header-wrapper">
 <p class="title-wrapper">
 <p class="logo"></p>
 <h2 class="title">Title</h2>
 </p>
 <p class="info-wrapper">
 <span class="username">你好，管理員！</span>
 <span class="cancel" @click.stop="switchCancelBoard">
 <p class="cancel-p" v-show="ifShowCancel">
 <ul>
 <li @click.stop="doSomething" title="用戶設置">設置 </li>
 <li @click.stop="doSomething" title="退出登錄">退出 </li>
 </ul>
 </p>
 </span>
 </p>
 </p>
</template>
<script>
 export default {
 props: {
 showCancel: {
 type: Boolean
 }
 },
 methods: {
 doSomething() {},
 switchCancelBoard() {
 // this.ifShowCancel = !this.showCancel;
 this.$emit("switch-show", !this.ifShowCancel);
 }
 },
 computed: {
 ifShowCancel() {
 return this.showCancel;
 }
 }
 };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
 .header-wrapper
 background: #1C60D1
 color: #fff
 width: 100%
 height: 50px
 line-height: 50px
 position: fixed
 top: 0px
 left: 0px
 font-size: 0
 .title-wrapper
 display: block
 position: relative
 float: left
 height: 50px
 .logo
 display: inline-block
 background-image: url('./logo.png')
 background-size: 30px 30px
 background-repeat: no-repeat
 width: 30px
 height: 30px
 margin-top: 10px
 .title
 display: inline-block
 font-size: 16px
 height: 50px
 line-height: 50px
 margin: 0px auto 0px 16px
 font-weight: normal
 vertical-align: top
 .info-wrapper
 display: block
 position: relative
 float: right
 height: 50px
 width: 160px
 font-size: 0
 .username
 display: inline-block
 height: 50px
 line-height: 50px
 font-size: 14px
 vertical-align: top
 .cancel
 display: inline-block
 vertical-align: middle
 background-image: url('./cancel.png')
 background-size: 32px 32px
 cursor: pointer
 background-repeat: no-repeat
 width: 32px
 height: 32px
 .cancel-p
 position: absolute
 display: block
 width: 60px
 height: 80px
 background: #fff
 z-index: 50
 top: 40px
 right: 16px
 font-size: 14px
 color: #646464
 box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4)
 ul
 padding-left: 0px
 margin: 0px
 li
 width: 100%
 height: 40px
 line-height: 40px
 text-align: center
 list-style-type: none
 &:hover
 background-color: #eaeaea
</style>