Vue는 페이지 오른쪽 상단에 부동/숨겨진 시스템 메뉴를 구현합니다.
이 기사에서는 페이지 오른쪽 상단에 일시 중지/숨길 수 있는 시스템 메뉴를 구현하기 위해 Vue를 주로 소개합니다. 구현 아이디어는 부울 값 showCancel을 소품을 통해 하위 구성 요소에 전달하고 이벤트를 상위 구성 요소에 바인딩하는 것입니다. 시스템 메뉴 표시 상태를 각각 제어하는 하위 구성요소입니다. 필요한 친구들은 참고하면 됩니다
페이지 오른쪽 상단에 있는 아바타를 클릭하면 페이지의 다른 곳을 클릭하거나 아바타를 다시 클릭하면 숨길 수 있습니다. 메뉴.
jQuery 프론트엔드 공성사자로서 이 기능을 구현하는 것은 매우 쉽다고 할 수 있지만, vue 문서를 이제 막 본 초보자에게는 여전히 개인적으로 넘어야 할 함정이 있습니다. 성공하기 위해.
지식 포인트
구성 요소 및 구성 요소 간 통신
계산된 속성
Text
1. 상위 구성 요소
이것은 시스템에만 관련됩니다. 현재 메뉴 이 기능은 아직 라우팅에 포함되지 않습니다.
기본 아이디어는 props를 통해 showCancel의 부울 값을 하위 구성 요소에 전달하고 이벤트를 각각 상위 및 하위 구성 요소에 바인딩하여 시스템 메뉴의 표시 상태를 제어하는 것입니다. 상위 구성 요소의 바운드 클릭 이벤트에서 하위 구성 요소에 전달된 showCancel 값이 재설정됩니다.
여기에는 첫 번째 작은 지식 포인트가 포함됩니다 - 하위 구성 요소 호출:
먼저 하위 구성 요소가 렌더링될 때까지 기다리는 사용자 정의 요소를 작성합니다.
<t-header :showCancel=showCancel></t-header>
그런 다음 작성된 하위 구성 요소를 가져옵니다.
import THeader from "./components/t-header/t-header";
그런 다음 등록합니다. 구성 요소의 하위 구성 요소:
components: {
THeader
}이 시점에서 신입생은 이러한 코드 줄이 하위 구성 요소를
컴포넌트(또는 prop)를 등록할 때 kebab-case(대시로 구분된 이름 지정), camelCase(카멜 케이스 이름 지정) 또는 PascalCase(단어의 첫 글자를 대문자로 한 이름)를 사용할 수 있습니다. template, please use kebab-case;
제가 이해한 바에 따르면, (예를 들어) custom 요소가
위의 내용은 단일 파일 구성 요소에서 으로 지정되는 HTML 템플릿이며 구성 요소 옵션에서 사용되는 문자열 템플릿도 있습니다. template: "" 지정된 템플릿입니다. 문자열 템플릿을 사용할 때 사용자 정의 태그는 세 가지 방법으로 작성할 수 있습니다. 자세한 내용은 구성 요소 명명 규칙에 대한 공식 문서를 참조하세요.
이렇게 상위 구성 요소의 프로토타입이 탄생했습니다.
<t-header :showCancel=showCancel></t-header>
<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 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>
피트를 밟기 전 아이디어에 따르면 v-show를 사용하여 하위 구성 요소가 수신된 후 디스플레이를 제어하고 숨깁니다. 그런 다음 상위 및 하위 구성 요소의 바인딩된 클릭 이벤트에서 상황에 따라 showCancel만 변경하면 됩니다. 시스템 메뉴에 있는 여러 옵션의 바인딩 이벤트 - 메뉴를 클릭만 하면 사라지기 때문에 바인딩 이벤트에 .stop이 사용됩니다. 즉
@click.stop="doSomething"</ code><p><br/>그래서 모든 것이 괜찮습니다. <code>@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 :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);
}
}prop의 showCancel 값이 실제로 사용될 수 있습니다. 하위 구성 요소 버튼을 클릭하면그러나 첫 번째 함정 이후에는 제가 아직 너무 어리다는 것이 분명해졌습니다. 다음은 몇 가지 나쁜 예입니다.
this.showCancel=!this.showCancel이 메뉴 표시를 실현합니다. 숨기지만 콘솔이 열리면 클릭할 때마다 오류가 발생합니다. 🎜vue.esm.js?efeb:578 [Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰게 되므로 소품을 직접 변경하지 마세요. . 대신 prop의 값을 기반으로 데이터 또는 계산된 속성을 사용하세요.🎜🎜🎜즉, 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 :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 "./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> /*子组件*/
Title
你好，管理员！
<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는 페이지 오른쪽 상단에 부동/숨겨진 시스템 메뉴를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Win11 입력 방법 부동 창 숨겨진 설정
Dec 30, 2023 pm 11:24 PM
몇몇 친구들은 win11 입력 방식의 플로팅 창 기능에 익숙하지 않고 항상 사용하기가 이상해서 이 플로팅 창 기능을 끄고 싶어합니다. 이제 아래에서 플로팅 창을 닫는 올바른 조작 방법을 소개하겠습니다. win11 시스템을 따르십시오. Win11에서 입력 방법 부동 창을 숨깁니다. 1. 컴퓨터의 설정 키를 열고 "시간 및 언어"를 입력한 후 "Enter"를 클릭합니다. 2. "고급 키보드 설정"에서 "입력 방법 전환"을 찾은 다음 "데스크톱 언어" 변경 "바" 앞의 체크 표시를 클릭한 후 "언어 바 옵션"을 입력합니다. 3. 연 후 여기에서 "숨기기"를 클릭하면 언어 플로팅 창을 닫습니다.
Windows 11 작업 표시줄 아이콘을 숨기는 방법은 무엇입니까?
Jan 06, 2024 am 08:38 AM
win11 시스템에서는 작업 표시줄의 아이콘이 문제인 경우 작업 표시줄 코너 오버플로 인터페이스에서 숨길 수 있습니다. 그러나 아래에 열리는 응용 프로그램의 작업 표시줄에 있는 아이콘은 숨길 수 없습니다. 구체적인 상황을 살펴보겠습니다. win11 작업 표시줄 아이콘을 숨기는 방법: 1. 아이콘을 중앙에 배치합니다. 1. 먼저 아래 작업 표시줄에서 아이콘을 숨기려면 마우스 오른쪽 버튼을 클릭하여 선택하고 "작업 표시줄에서 고정 해제"를 클릭합니다. 2. 하지만 열면 이 응용 프로그램을 진행 중입니다. 이를 사용하면 숨길 수 없습니다. 2. 오른쪽 하단에 있는 아이콘 1. 오른쪽 하단에 있는 애플리케이션 아이콘을 숨기려면 먼저 시스템 설정을 엽니다. 2. 그런 다음 그림과 같이 왼쪽 사이드바에서 "개인 설정"을 클릭하세요. 3. 그런 다음 오른쪽에 있는 작업 표시줄을 클릭하여 들어갑니다.
WeChat 친구를 차단하거나 삭제하지 않고 숨기는 방법은 무엇입니까? WeChat 친구를 차단하거나 삭제하지 않고 숨기는 방법
Mar 13, 2024 pm 07:19 PM
WeChat 친구를 차단하거나 삭제하지 않고 숨기는 방법은 무엇입니까? 많은 사용자가 친구를 숨기고 싶지만 어떻게 해야 할지 모릅니다. 이 웹사이트에서 WeChat 친구를 차단하거나 삭제하지 않고 숨기는 방법을 주의 깊게 소개하세요. 차단하거나 삭제하지 않고 WeChat 친구를 숨기는 방법 방법 1: 1. 먼저 WeChat 소프트웨어를 열고 WeChat 페이지에서 주소록을 찾은 다음 "내"를 클릭합니다. 2. 그런 다음 설정 페이지로 들어갑니다. 3. "개인정보 보호" 옵션을 찾아 클릭하세요. 4. 그런 다음 "그가 보지 못하게 하세요"를 클릭하세요. 5. 그녀가 보지 못하게 페이지로 이동하여 "+"를 클릭하여 숨기고 싶은 친구를 확인하세요.
Douyin 단편 영상 작품 숨기기 방법 개인 영상 작품 숨기기 방법
Mar 12, 2024 pm 12:49 PM
Douyin 단편 영상 앱 소프트웨어에는 다양한 단편 영상 작품이 제공되며 원하는 대로 시청할 수 있으며 모두 무료로 제공됩니다. 다양한 유형의 라이브 영상 채널이 공개되어 있으며 모든 영상 콘텐츠는 원본입니다. . 모두에게 가장 만족스러운 시청 방법을 제공하세요. 계정을 입력하여 온라인으로 로그인하면 모두가 매일 시청하는 동영상을 바탕으로 정확하게 추천되는 다양하고 흥미로운 짧은 동영상이 푸시됩니다. 또한 생방송 방에 들어가 앵커와 상호 작용하고 채팅할 수도 있습니다. 더 행복해요. 개인이 업로드한 작품도 숨길 수 있으며, 한 번의 클릭으로 설정이 매우 간단합니다. 위아래로 스와이프하면 수많은 네티즌들의 실시간 댓글도 볼 수 있습니다. 이제 편집자는 온라인 Douyin 짧은 비디오를 자세히 설명했습니다. 사용자는 개인 비디오 작품을 숨기는 방법을 요구합니다. 첫 번째 오픈 Douyin 짧은 비디오
스팀에 숨겨진 게임은 어디에 있나요?
Feb 24, 2024 am 11:37 AM
Steam에서 보고 싶지 않은 일부 게임을 숨길 수 있는데 숨겨진 게임은 어디에 있나요? 플레이어는 보기에서 숨겨진 게임을 클릭하여 숨겨진 게임 콘텐츠를 찾을 수 있습니다. Steam의 숨겨진 게임 위치에 대한 소개는 구체적인 방법을 알려드립니다. 와서 살펴보세요! "Steam 사용 튜토리얼" Steam의 숨겨진 게임은 어디에 있습니까? 답변: 보기에서 숨겨진 게임을 클릭하세요. 구체적인 방법: 1. 먼저 소프트웨어에서 보기를 클릭하고 숨겨진 게임을 클릭하세요. 2. 클릭하시면 왼쪽 메뉴에 숨겨진 게임들이 보입니다. 게임을 숨기는 방법: 1. 먼저 자신의 게임 라이브러리를 클릭합니다. 2. 게임을 선택하고 마우스 오른쪽 버튼을 클릭한 후 관리를 선택하세요. 3. 이 게임을 숨기도록 선택하세요.
Xiaomi Mi 14에서 Smart Island를 숨기는 방법은 무엇입니까?
Mar 18, 2024 pm 03:40 PM
놀라운 하드웨어 구성과 우수한 기능 외에도 Xiaomi Mi 14에는 Smart Island라는 매혹적인 장소도 숨겨져 있습니다. 여기에서 사용자는 개인화된 맞춤화와 무제한의 창의적인 휴대폰 경험을 즐길 수 있습니다. 하지만 모든 사람이 이 기능을 좋아하는 것은 아닙니다. 그렇다면 Xiaomi Mi 14는 Smart Island를 어떻게 숨길까요? 함께 알아봅시다. Xiaomi Mi 14에서 Smart Island를 숨기는 방법은 무엇입니까? 1. Xiaomi 14 휴대폰의 설정 애플리케이션을 엽니다. 2. 스크롤하여 "기능" 옵션을 찾은 다음 클릭하여 들어갑니다. 3. 기능 페이지에서 "스마트 아일랜드 숨기기" 옵션을 찾아서 켜세요. 4. 스마트 아일랜드 숨기기가 켜져 있는지 확인한 후 바탕화면으로 돌아가면 스마트 아일랜드가 숨겨져 있는 것을 확인할 수 있습니다.
Douyin의 작품 숨기기에 대한 자세한 튜토리얼
Mar 25, 2024 pm 03:11 PM
1. 먼저 [+]를 클릭하여 촬영하세요. 2. 그런 다음 오른쪽 하단의 체크 표시를 클릭하여 촬영 완료를 확인하세요. 클릭] 다음[, 3. [볼 수 있는 사람]을 클릭하세요. [비공개]를 선택하세요. 시나리오 2: 작업이 완료되었습니다. 1. [나]를 클릭하고 [작업]을 선택하세요. 2. 오른쪽 [점 3개] 로고를 클릭하세요. 3. 왼쪽으로 밀어 [권한 설정]을 찾아주세요. 4. [비공개로 설정]을 클릭하세요.
휴대폰에 숨겨진 정크를 철저하게 정리하는 방법(휴대폰 메모리에서 정크를 완전히 제거)
Jun 01, 2024 am 09:29 AM
기술의 지속적인 발전과 스마트폰의 대중화로 인해 휴대전화는 우리 일상생활에서 없어서는 안 될 필수품이 되었습니다. 이러한 정크 파일은 귀중한 저장 공간을 차지하며 시간이 지남에 따라 숨겨진 대량의 정크 파일이 휴대폰에 쌓여 휴대폰 성능이 저하됩니다. 휴대폰에 숨겨진 정크를 철저하게 청소하는 방법을 아는 것은 모든 휴대폰 사용자에게 필수적인 지식이 되었습니다. 1. 쓸모없는 애플리케이션 캐시 찾기 및 지우기 2. 더 이상 사용하지 않는 애플리케이션 삭제 3. 사진 및 비디오 캐시 정리 4. 임시 파일 및 다운로드 폴더 철저히 정리 5. 연락처 및 문자 메시지 기록 정리 및 정리 6. 시스템 캐시 정리 7. 쓸모없는 시스템 애플리케이션 제거 8. 브라우저 캐시 및 기록 정리 9. 유효하지 않은 음악 및 오디오 파일 삭제 10. 휴대폰 파일 시스템 최적화
