Vue在页面右上角实现可悬浮/隐藏的系统菜单

这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏。

作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来说,坑还是要亲自踩过才算圆满。

知识点

  • 组件及组件间通信
  • 计算属性

正文

1. 父组件

这里暂时只涉及系统菜单这一个功能,因此路由暂未涉及。

基本思路是:通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态。其中在父组件的绑定click事件中,将传入子组件的showCancel值重置。

这里就涉及第一个小知识点——子组件调用:

首先写好等待被子组件渲染的自定义元素:

<t-header :showCancel=showCancel></t-header>

接着import写好的子组件:

import THeader from "./components/t-header/t-header";

然后在组件中注册子组件:

components: {
 THeader
}

到这里,新入坑的同学可能会比较疑惑这几行代码是怎样把子组件对应到<t-header>标签的,官方文档是这样说的:

当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名);

在 HTML 模板中,请使用 kebab-case;

我的理解是(举例),当自定义元素为<t-header>时,注册组件名可以有三种写法:t-header、tHeader和THeader,在这种情况下注册的组件会自动识别并渲染到<t-header>。

需要注意的是,以上使用的是HTML 模板,是在单文件组件里用<template><template/>指定的模板;另外存在一种字符串模板,是用在组件选项里用template: "" 指定的模板。当使用字符串模板时,自定义标签可以用三种写法,具体情况请移步官方文档 组件命名约定。

这样父组件的雏形就诞生了:

<template>
 <div id="app" @click="hideCancel">
 <t-header :showCancel=showCancel></t-header>
 <!-- <router-view/> -->
 </div>
</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;
  }
 }
 };
</script>

2. 子组件

子组件中.cancel为打开系统菜单的按钮,.cancel-div为系统菜单,最开始是这个样子:

<template>
 <div class="header-wrapper">
 /*这里是logo和title*/
 ...
 /*这里是用户名和按钮*/
 <div class="info-wrapper">
  <span class="username">你好,管理员!</span>
  <span class="cancel" @click.stop="switchCancelBoard">
  <div class="cancel-div" v-show="showCancel">
   <ul>
   <li @click.stop="doSomething" title="用户设置">设置 </li>
   <li @click.stop="doSomething" title="退出登录">退出 </li>
   </ul>
  </div>
  </span>
 </div>
 </div>
</template>

按照踩坑之前的思路,在子组件接到showCancel值后用v-show控制显示隐藏,那么在父子组件的绑定click事件中只需要根据情况更改showCancel值就可以了,只要注意对系统菜单内几个选项的绑定事件不要触发父子组件上的绑定事件——总不能一点菜单它就没了,所以在绑定事件中用到了.stop,即
@click.stop="doSomething"

于是万事大吉,也就是像这样:

<script>
 export default {
 props: {
  showCancel: {
  type: Boolean
  }
 },
 methods: {
  doSomething() {},
  switchCancelBoard() {
  this.showCancel = !this.showCancel;
  }
 },
 computed: {
  ifShowCancel() {
  return this.showCancel;
  }
 }
 };
</script>

然而第一波踩坑之后一起表明显然我还是太年轻。下面是一些不好的示范:

prop来的showCancel值的确可以用,点击子组件按钮的时候,

this.showCancel=!this.showCancel

实现了菜单的显示/隐藏,但是一打开控制台,每次点击贡献了一条报错:

vue.esm.js?efeb:578 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

意思是:避免修改prop值,因为父组件一旦re-render,这个值就会被覆盖;

另外,尽管在这个按钮上实现了显示状态的切换,但是点击其他区域的时候,并不会隐藏它,原因是:子组件prop值的变化并没有影响到父组件,因此showCancel的值一直保持初始值没有变化,而只有在这个值被更新时才会触发子组件中相关值的更新。

——好吧,那么老老实实的用一个计算属性接收showCancel值,这样实现点击子组件控制系统菜单的状态切换;

获得了计算属性ifShowCancel,组件相应的变成了v-show="ifShowCancel",我试图在绑定事件里通过this.ifShowCancel=!this.ifShowCancel切换菜单状态,报错,得到报错信息:Computed property "ifShowCancel" was assigned to but it has no setter;

明白了,要以直接赋值的形式改变计算属性ifShowCancel的值,需要一个setter函数,但是setter函数中无法修改prop值,因此在getter中也就无法通过return this.showCancel来更新这个计算属性,所以这个方法貌似也行不通;

到此为止,好像路都成了堵死状态:prop值不能改->要用计算属性;计算属性不能改->需要setter;而写入了getter、setter,计算属性的值依赖于prop值->prop值不能改。——一个堪称完美的闭环诞生了!

走投无路之际我想起了$emit和$on这一对。

3. 父子互相通信

前边的prop实现了从父到子的单向通信,而通过$emit和$on,就可以实现从子组件到父组件的通信:这不能直接修改父组件的属性,但却可以触发父组件的指定绑定事件,并将一个值传入父组件。

在这一步我摒弃了点击按钮时的去操作子组件内属性的想法,既然计算属性ifShowCancel依赖于prop值,那么就在点击按钮时,通过$emit触发父组件的事件,并将需要修改的属性值传入父组件,于是:

/*父组件自定义元素绑定switch-show事件*/
<t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
// 父组件js
methods: {
 //会被子组件$emit触发的方法
 switchShow(val) {
 this.showCancel = val;
 }
}
// 子组件js
methods: {
 //按钮上的绑定click事件
 switchCancelBoard() {
 this.$emit("switch-show", this.ifShowCancel);
 }
}

这样处理流程就变成了:点击按钮->作为计算属性的ifShowCancel值传入父组件并触发父组件事件,对showCancel赋值->父组件属性更新->触发子组件prop更新->触发重新compute,更新ifShowCancel值->v-show起作用。
另外在点击其他区域时,通过父组件绑定的click事件,就可以重置showCancel值,进而隐藏掉出现的系统菜单。

下边放出这个功能的完整代码。

4. 完整代码

/*父组件*/
<template>
 <div id="app" @click="hideCancel">
 <t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
 <!-- <router-view/> -->
 </div>
</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>
 <div class="header-wrapper">
 <div class="title-wrapper">
  <div class="logo"></div>
  <h2 class="title">Title</h2>
 </div>
 <div class="info-wrapper">
  <span class="username">你好,管理员!</span>
  <span class="cancel" @click.stop="switchCancelBoard">
  <div class="cancel-div" v-show="ifShowCancel">
   <ul>
   <li @click.stop="doSomething" title="用户设置">设置 </li>
   <li @click.stop="doSomething" title="退出登录">退出 </li>
   </ul>
  </div>
  </span>
 </div>
 </div>
</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-div
   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>

总结

以上所述是小编给大家介绍的Vue在页面右上角实现可悬浮/隐藏的系统菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码
(0)

相关推荐

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • Vue在页面右上角实现可悬浮/隐藏的系统菜单

    这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏. 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来说,坑还是要亲自踩过才算圆满. 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能,因此路由暂未涉及. 基本思路是:通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态.其中在父组

  • Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

    目录 前言 图片说明 功能实现 这里需要注意一点 mouseover 和 mouseenter 的区别 总结 前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果,问了一下我的组长-豪哥 他告诉我很简单,利用vue的@mouseenter 和 @mouseleave事件就可以完美解决 本着这个思路,我去寻求答案,

  • vue一个页面实现音乐播放器的示例

    本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器,界面一定要炫酷.太low了听歌没感觉.本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适.不用兼容手机端. 用css做图标 本怀着

  • 浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)

    上一篇说了vue单页面解决解决SEO的问题 只是用php预处理了meta标签 但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题 那接下来可以更进一步的预填充内容了 预填充内容 这里依然使用php来实现 首先在php中拉取需要填充的数据,列表或是具体内容 修改拉取数据部分 $urlExp = explode('/',$_SERVER['REQUEST_URI']); if(count($urlExp)>2 && $urlExp[1] == 'article'

  • vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

  • vue实现页面刷新动画

    本文实例为大家分享了vue实现页面刷新动画的具体代码,供大家参考,具体内容如下 做一个vue的页面刷新动画,找了好多动画样式,感谢大佬们造的轮子. 主要就是在index.html文件里面写一个动画样式,在页面刷新的时候让他去前面做动画,等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了,而判断我们的样式是否加载好可以用created生命周期去判断,因为这个生命周期是在浏览器解析完html的各种样式后触发的,所以可以在app.vue的created生命周期里面把动画样式移除 接下来是代码

  • vue实现移动端拖拽悬浮按钮

    目录 功能介绍: 大致需求: 整体思路: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 本文实例为大家分享了vue实现移动端拖拽悬浮按钮的具体代码,供大家参考,具体内容如下 功能介绍: 在移动端开发中,实现悬浮按钮在侧边显示,为不遮挡页面内容,允许手指拖拽换位. 大致需求: 1.按钮在页面侧边悬浮显示:2.手指长按按钮,按钮改变样式,允许拖拽改变位置:3.按钮移动结束,手指松开,计算距离左右两侧距离并自动移动至侧边显示:4.移动至侧边后,按钮根据具

  • vue切换页面(路由)时如何保持滚动条回到顶部

    目录 vue切换“页面”(路由)时保持滚动条回到顶部 vue页面跳转后,滚动条不在顶部的解决 问题描述 解决方法 vue切换“页面”(路由)时保持滚动条回到顶部 vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置: 这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的. 解决办法是在切换路由的时候,将滚动区域的滚动条复位为0.   // 使用 watch 监听$router的变化,   watch: {     '$route':

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • vue项目页面的打印和下载PDF加loading效果的实现(加水印)

    目录 vue页面的打印和下载PDF(加水印) vue项目页面的打印 vue项目页面下载PDF 封装异步PDF下载函数并添加loading效果 总结 vue页面的打印和下载PDF(加水印) vue项目页面的打印 打印的不用说,调用 window.print() 的方法即可: 注意点:如果用到背景图的话,需要CSS中添加设置: // 标签看哪些地方用到背景图就加哪些,不然调打印机会把背景图隐藏掉 div { // webkit 为Google Chrome Safari 等浏览器内核 -webkit

随机推荐