Vue implements a floating/hidden system menu in the upper right corner of the page

This article mainly introduces Vue to implement a system menu that can be suspended/hidden in the upper right corner of the page. The implementation idea is to pass the Boolean value of showCancel to the child component through props, and bind events to the parent and child components respectively to control this. The display status of the system menu. Friends in need can refer to

This is a very common function on most websites. Click the avatar in the upper right corner of the page to display a floating menu. Click elsewhere on the page or click the avatar again to hide the menu.

As a jQuery front-end siege lion, it is very easy to implement this function, but for a novice who has just glanced at the vue document, there are still pitfalls. It’s only complete if you step on it yourself.

Knowledge points

• Components and communication between components

• Calculation Properties

Text

##1. Parent component

Only the system menu function is involved here, so routing is not involved yet.

The basic idea is: pass the showCancel Boolean value to the child component through props, and bind events to the parent and child components respectively to control the display state of the system menu. In the bound click event of the parent component, the showCancel value passed in to the child component is reset.

This involves the first little knowledge point - subcomponent call:

First write the custom element waiting to be rendered by the subcomponent:

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

Then import the written sub-component:

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

Then register the sub-component in the component:

components: {
 THeader
}

At this point, new students may be confused about how these lines of code map subcomponents to the 19d41f1de6b48708f8fbbade5bd62dd3 tag. The official documentation says this:

When registering a component (or prop), you can use kebab-case (naming separated by dashes), camelCase (naming in camel case) or PascalCase (naming with the first letter of the word capitalized);

In the HTML template, please use kebab-case;

My understanding is (for example), when the custom element is 19d41f1de6b48708f8fbbade5bd62dd3, the registered component name can be written in three ways: t-header, tHeader and THeader, in this case the registered component will be automatically recognized and rendered to 19d41f1de6b48708f8fbbade5bd62dd3.

It should be noted that the above is an HTML template, which is specified with d477f9ce7bf77f53fbcf36bec1b69b7adcdc0fa59b5fea5bdae0d810c3919fcd in the single-file component; there is also a string template, which is used in The template specified with template: "" in the component options. When using string templates, custom tags can be written in three ways. For details, please refer to the official documentation for component naming conventions.

In this way, the prototype of the parent component was born:

<script>
 import THeader from &quot;./components/t-header/t-header&quot;;
 export default {
 name: "app",
 components: {
  THeader
 },
 data() {
  return {
  showCancel: false
  };
 },
 methods: {
  hideCancel() {
  this.showCancel = false;
  }
 }
 };
</script>

2. Child component

In the subcomponent, .cancel is the button to open the system menu, and .cancel-p is the system menu. It initially looks like this:

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

Follow the idea before stepping on the trap, use v-show to control the display and hide after the child component receives the showCancel value, then in the binding click event of the parent and child components, you only need to change the showCancel value according to the situation, as long as you pay attention to the system menu The binding events of several options should not trigger the binding events on the parent and child components - you can't just click the menu and it will disappear, so .stop is used in the binding event, that is,

@click.stop ="doSomething"

So everything is fine, that is, like this:

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

However, after the first wave of traps, it became clear that I'm still too young. Here are some bad examples: The showCancel value from

prop can indeed be used. When clicking the subcomponent button,

this.showCancel=!this.showCancel

Implements the display/hiding of the menu, but when the console is opened, an error message is reported every time:

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.

means: Avoid modifying prop value , because once the parent component is re-rendered, this value will be overwritten;

In addition, although the display state switching is implemented on this button, it will not be hidden when clicking other areas. Yes: Changes in the prop value of the subcomponent do not affect the parent component, so the value of showCancel remains unchanged from the initial value, and only when this value is updated will the update of the relevant value in the subcomponent be triggered.

——Okay, then honestly use a calculated property to receive the showCancel value, so that you can click on the subcomponent to control the state switching of the system menu;

获得了计算属性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. 完整代码

/*父组件*/

<script>
 import THeader from &quot;./components/t-header/t-header&quot;;
 export default {
 name: "app",
 components: {
  THeader
 },
 data() {
  return {
  showCancel: false
  };
 },
 methods: {
  hideCancel() {
  this.showCancel = false;
  },
  switchShow(val) {
  this.showCancel = val;
  }
 }
 };
</script>

/*子组件*/

<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>

相关推荐：

Vue 按键修饰符处理事件的方法

Vue如何制作图片轮播组件（附代码）

The above is the detailed content of Vue implements a floating/hidden system menu in the upper right corner of the page. For more information, please follow other related articles on the PHP Chinese website!