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

　　

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

　　

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

　　

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

　　

　　
    　　<李>组件及组件间通信李 　　<李>计算属性李 　　
　　

　　

　　

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

　　

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

　　

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

　　

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

　　 　　 　　& lt;形:showCancel=showCancel> & lt;/t-header> 　　 　　

接着进口写好的子组件:

　　 　　 　　从“。/组件/导入THeader形/t形”; 　　 　　

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

　　 　　 　　组件:{ 　　THeader 　　} 　　 　　

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

　　

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

　　

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

　　

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

　　

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

　　

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

　　 　　 　　& lt; template> 　　& lt; div id="应用" @click=癶ideCancel”比; 　　& lt;形:showCancel=showCancel> & lt;/t-header> 　　& lt; !——& lt; router-view/比;——比; 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　从“。/组件/导入THeader形/t形”; 　　出口默认{ 　　名称:“应用程序”, 　　组件:{ 　　THeader 　　}, 　　数据(){ 　　返回{ 　　showCancel:假 　　}; 　　}, 　　方法:{ 　　hideCancel () { 　　这一点。showCancel=false; 　　} 　　} 　　}; 　　& lt;/script> 　　 　　

　　

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

　　 　　 　　& lt; template> 　　& lt; div类=癶eader-wrapper”比;/*这里是图标和标题*/?*这里是用户名和按钮*/& lt; div类=癷nfo-wrapper”比; 　　& lt;跨类="用户名"在你好,管理员! & lt;/span> 　　& lt;跨类=叭∠盄click.stop=皊witchCancelBoard”比; 　　& lt; div类=" cancel-div " v-show=皊howCancel”比; 　　& lt; ul> 　　& lt;李@click。停止=" doSomething " title=坝没柚谩白４巧柚? lt;/li> 　　& lt;李@click。停止=" doSomething " title=巴顺龅锹肌钡脑谕顺? lt;/li> 　　& lt;/ul> 　　& lt;/div> 　　& lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　 　　

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

　　

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

　　 　　 　　& lt; script> 　　出口默认{ 　　道具:{ 　　showCancel: { 　　类型:布尔 　　} 　　}, 　　方法:{ 　　doSomething () {}, 　　switchCancelBoard () { 　　这一点。showCancel=! this.showCancel; 　　} 　　}, 　　计算:{ 　　ifShowCancel () { 　　返回this.showCancel; 　　} 　　} 　　}; 　　& lt;/script> 　　 　　

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

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