Vue를 사용하여 페이지 오른쪽 상단에 부동/숨겨진 메뉴를 구현하는 방법

이번에는 Vue를 사용하여 페이지 오른쪽 상단에 플로팅/숨겨진 메뉴를 구현하는 방법을 보여드리겠습니다. Vue를 사용하여 페이지 오른쪽 상단에 플로팅/숨겨진 메뉴를 구현할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

이것은 대부분의 웹사이트에서 매우 일반적인 기능입니다. 플로팅 메뉴를 표시하려면 페이지 오른쪽 상단에 있는 아바타를 클릭하거나 메뉴를 숨기려면 아바타를 다시 클릭하세요.

jQuery 프론트엔드 공성사자로서 이 기능을 구현하는 것은 매우 쉽다고 할 수 있지만, vue 문서를 이제 막 본 초보자에게는 여전히 개인적으로 넘어야 할 함정이 있습니다. 성공하기 위해.

지식 포인트

• 구성 요소 및 구성 요소 간 통신

• 계산된 속성

Text

1. 상위 구성 요소

이것은 시스템에만 관련됩니다. 현재 메뉴 이 기능은 아직 라우팅에 포함되지 않습니다.

기본 아이디어는 props를 통해 showCancel의 부울 값을 하위 구성 요소에 전달하고 이벤트를 각각 상위 및 하위 구성 요소에 바인딩하여 시스템 메뉴의 표시 상태를 제어하는 ​​것입니다. 상위 구성 요소의 바운드 클릭 이벤트에서 하위 구성 요소에 전달된 showCancel 값이 재설정됩니다.

여기에 첫 번째 작은 지식 포인트가 있습니다 - 하위 구성 요소 호출:

먼저 하위 구성 요소에 의해 렌더링되기를 기다리는 사용자 정의 요소를 작성합니다:

<t-header></t-header>

그런 다음 작성된 하위 구성 요소를 가져옵니다:

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

그런 다음 등록합니다.

components: {
 THeader
}

이 시점에서 신입생은 이 코드 줄이 하위 구성 요소를 태그에 매핑하는 방법에 대해 혼란스러울 수 있습니다.

구성 요소를 등록할 때( 또는 prop), kebab-case(하이픈으로 구분된 이름 지정), camelCase(카멜 케이스 이름 지정) 또는 PascalCase(단어의 첫 글자를 대문자로 사용하여 이름 지정)를 사용할 수 있습니다.

HTML 템플릿에서는 kebab-case를 사용하세요.

me 예를 들어, 커스텀 요소가 인 경우 등록된 구성 요소 이름은 t-header, tHeader 및 THeader의 세 가지 방법으로 작성할 수 있습니다. 이 경우 등록된 구성 요소는 자동으로 작성됩니다. 인식되어 로 렌더링됩니다.

위의 내용은 단일 파일 구성 요소에서

이렇게 상위 구성 요소의 프로토타입이 탄생했습니다.

<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- p는 시스템 메뉴입니다.

<template>
 <p>
 /*这里是logo和title*/
 ...
 /*这里是用户名和按钮*/
 </p>
<p>
  <span>你好，管理员！</span>
  <span>
  <p>
   </p>
<ul>
   <li>设置 </li>
   <li>退出 </li>
   </ul>
  </span></p>
  
 
 
</template>

트랩을 밟기 전의 아이디어에 따르면 v-show를 사용하여 하위 구성 요소가 showCancel 값을 받은 후 표시를 제어하고 바인딩 클릭 이벤트에서 숨깁니다. 상위 및 하위 구성 요소 중 상황에 따라 showCancel 값만 변경하면 됩니다. 시스템 메뉴에 있는 여러 옵션의 바인딩 이벤트가 상위-하위 구성 요소의 바인딩 이벤트를 트리거해서는 안 됩니다. 메뉴를 클릭하면 사라지기 때문에 바인딩 이벤트에 .stop이 사용됩니다. 즉,
@click.stop ="doSomething"@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

그래서 모든 것이 괜찮습니다.

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

그러나 첫 번째 함정을 겪은 후에는 내가 아직 너무 어리다는 것이 분명해졌습니다. 다음은 몇 가지 나쁜 예입니다.

prop의 showCancel 값이 실제로 사용될 수 있습니다. 하위 구성 요소 버튼을 클릭하면

this.showCancel=!this.showCancel

이 메뉴 표시를 실현합니다. 숨기지만 콘솔이 열리면 클릭할 때마다 오류가 발생합니다. 🎜🎜🎜vue.esm.js?efeb:578 [Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰게 되므로 소품을 직접 변경하지 마세요. 🎜🎜🎜 즉, 상위 구성 요소가 다시 렌더링되면 이 값을 덮어쓰게 되므로 prop 값을 수정하지 마세요.

另外，尽管在这个按钮上实现了显示状态的切换，但是点击其他区域的时候，并不会隐藏它，原因是：子组件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></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 "./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>

/*子组件*/

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用vue mint-ui tabbar（附代码）

怎样使用Vue结合Video.js播放m3u8视频

위 내용은 Vue를 사용하여 페이지 오른쪽 상단에 부동/숨겨진 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!