成都创新互联网站制作重庆分公司

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

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

成都网站建设哪家好,找创新互联建站!专注于网页设计、网站建设公司、微信开发、微信小程序、集团成都定制网页设计等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:PVC花箱等众多领域,积累了大量丰富的经验,同时也获得了客户的一致赞美!

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

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

知识点

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

正文

1. 父组件

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

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

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

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

接着import写好的子组件:

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

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

components: {
 THeader
}

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

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

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

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

需要注意的是,以上使用的是HTML 模板,是在单文件组件里用