Vue implémente un menu système flottant/caché dans le coin supérieur droit de la page

Cet article présente principalement Vue pour implémenter un menu système qui peut être suspendu/masqué dans le coin supérieur droit de la page. L'idée d'implémentation est de transmettre la valeur booléenne de showCancel au composant enfant via des accessoires et de lier les événements à. les composants parent et enfant respectivement pour contrôler cet état d'affichage du menu système. Les amis dans le besoin peuvent se référer à

Il s'agit d'une fonction très courante sur la plupart des sites Web. Cliquez sur l'avatar dans le coin supérieur droit de la page pour afficher un menu flottant. Cliquez ailleurs sur la page ou cliquez à nouveau sur l'avatar pour. masquer le menu.

En tant que lion de siège frontal jQuery, on peut dire qu'il est très simple d'implémenter cette fonction, mais pour un novice qui vient de jeter un coup d'œil au document vue , il y a encore des pièges. Ce n'est complet que si vous marchez dessus vous-même.

Points de connaissances

• Communication entre composants et composants

• Calcul Propriétés

Texte

1. >Cela concerne uniquement la fonction du menu système pour le moment, le routage n'est donc pas encore impliqué.

L'idée de base est la suivante : transmettre la valeur booléenne showCancel au composant enfant via des accessoires et lier les événements aux composants parent et enfant respectivement pour contrôler l'état d'affichage du menu système. Dans l'événement de clic lié du composant parent, la valeur showCancel transmise au composant enfant est réinitialisée.

Cela implique le premier petit point de connaissance - appel du sous-composant :

Écrivez d'abord l'élément personnalisé en attente d'être rendu par le sous-composant :

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

Importez ensuite le sous-composant écrit :

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

Enregistrez ensuite le sous-composant dans le composant :

components: {
 THeader
}

À ce stade, les nouveaux étudiants peuvent ne pas savoir comment ces lignes de code mappent les sous-composants à la balise 19d41f1de6b48708f8fbbade5bd62dd3 Officiel La documentation dit ceci :

Lors de l'enregistrement d'un composant (ou d'un accessoire), vous pouvez utiliser kebab-case (nommage séparé par des tirets), camelCase (nommage en casse chameau) ou PascalCase (nommage avec la première lettre de un mot en majuscule);

Dans les modèles HTML, veuillez utiliser kebab-case ;

Je crois comprendre (par exemple) que lorsque l'élément personnalisé est 19d41f1de6b48708f8fbbade5bd62dd3, il peut y avoir trois types de noms de composants enregistrés Méthode d'écriture : t-header, tHeader et THeader Dans ce cas, le composant enregistré sera automatiquement reconnu et rendu dans 19d41f1de6b48708f8fbbade5bd62dd3.

Il convient de noter que ce qui précède est un modèle HTML, qui est spécifié avec d477f9ce7bf77f53fbcf36bec1b69b7adcdc0fa59b5fea5bdae0d810c3919fcd dans le composant à fichier unique, il existe également un modèle de chaîne, qui est utilisé dans Le modèle spécifié avec template : "" dans les options du composant. Lors de l'utilisation de modèles de chaînes, les balises personnalisées peuvent être écrites de trois manières. Pour plus de détails, veuillez vous référer à la documentation officielle pour les conventions de dénomination des composants.

C'est ainsi qu'est né le prototype du composant parent :

<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. Composant enfant

, .cancel est le bouton pour ouvrir le menu système, et .cancel-p est le menu système. Il ressemble initialement à ceci : <.>

Selon l'idée avant de marcher sur le piège, utilisez v-show pour contrôler l'affichage et le masquage après que le composant enfant ait reçu la valeur showCancel, puis dans l'événement de clic lié de. les composants parent et enfant, il vous suffit de modifier la valeur showCancel en fonction de la situation. Tant que faites attention à ne pas déclencher l'événement de liaison sur le composant parent-enfant pour les événements de liaison de plusieurs options dans le menu système, vous pouvez. Il ne suffit pas de cliquer sur le menu et il disparaîtra, donc .stop est utilisé dans l'événement de liaison, c'est-à-dire

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

Donc tout allait bien, ce qui ressemble à ceci :

@click.stop="doSomething"

Cependant, après la première vague de pièges, il est devenu évident que j'étais encore trop jeune. Voici quelques mauvais exemples : La valeur showCancel de

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

prop peut en effet être utilisée Lorsque vous cliquez sur le bouton du sous-composant,

réalise l'affichage du. menu. /Hide, mais une fois la console ouverte, chaque clic génère une erreur :

this.showCancel=!this.showCancelvue.esm.js?efeb:578 [Vue warn] : évitez de muter directement un accessoire car la valeur le fera. être écrasé à chaque fois que le composant parent est restitué. À la place, utiliser une donnée ou une propriété calculée basée sur la valeur de l'accessoire sera écrasée

De plus, bien que l'état d'affichage soit activé sur ce bouton, il ne sera pas écrasé ; être masqué lorsque vous cliquez sur d'autres zones. La raison est la suivante : la modification de la valeur du prop du sous-composant n'a aucun effet sur le composant parent, donc la valeur de showCancel reste inchangée par rapport à la valeur initiale, et ce n'est que lorsque cette valeur est mise à jour que le la mise à jour de la valeur pertinente dans le composant enfant soit déclenchée.

——D'accord, alors utilisez honnêtement une propriété calculée pour recevoir la valeur showCancel, afin de réaliser le changement d'état du menu système en cliquant sur le sous-composant

;

获得了计算属性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如何制作图片轮播组件（附代码）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!