Vue 컴포넌트로 구현한 간단한 팝업창 기능의 사례에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 간단한 팝업창 기능을 구현하는 Vue 컴포넌트의 사례에 대해 자세히 설명하겠습니다. Vue 컴포넌트에서 간단한 팝업창 기능을 구현하는 노트는 무엇인가요? 살펴보자.

최근에는 element-ui 프레임워크와 Dialog 대화 상자 구성 요소를 사용하고 있습니다. 달성된 효과는 이전 모바일 프로젝트에서 만든 팝업 구성 요소와 거의 동일합니다. 그런 다음 이 팝업 창 구성 요소의 구현 방법을 공유하고 싶었습니다. 다음 문서에서는 팝업 창 구성 요소 구현을 안내합니다.

이 기사의 주요 내용은 팝업 창 마스크 구현, 슬롯 슬롯, props 및 $emit 매개 변수 사용에 관한 것이며 특정 구성 요소 코드도 업로드됩니다. 마음에 드셨다면 좋아요/팔로우, 응원 부탁드립니다. 모두가 이 글을 읽고 뭔가를 얻을 수 있기를 바랍니다.

컴포넌트의 최종 효과

구현 단계

먼저 컴포넌트의 html 및 css 스타일, 마스크 레이어, 콘텐츠 레이어를 구축합니다.
맞춤형 팝업 창 콘텐츠: 팝업 창 구성 요소는 슬롯을 통해 상위 구성 요소에서 전달된 팝업 창 콘텐츠를 허용합니다.
맞춤형 팝업 창 스타일: 팝업 창 구성 요소는 props를 통해 상위 구성 요소에서 전달된 팝업 창 너비, 위쪽, 아래쪽, 왼쪽 및 오른쪽 위치를 받습니다.
구성 요소 스위치: 상위 구성 요소를 통해 전달된 소품은 구성 요소의 표시 및 숨기기를 제어합니다. 하위 구성 요소가 닫히면 $emit 이벤트가 상위 구성 요소를 트리거하여 값을 변경합니다.

1. 구성 요소의 html 및 css 스타일을 빌드합니다.

HTML 구조: 마스크 레이어, 콘텐츠 레이어, 콘텐츠 레이어에는 헤더 제목, 본문 콘텐츠, 닫기 버튼이 있습니다.

다음은 컴포넌트의 html 구조입니다. 나중에 추가할 내용이 있으니 먼저 건너뛰셔도 됩니다.

<template>
 <p class="dialog">
  <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
  <p class="dialog-cover back" v-if="isShow" @click="closeMyself"></p>
  <!-- transition 这里可以加一些简单的动画效果 -->
  <transition name="drop">
   <!--style 通过props 控制内容的样式 -->
  <p class="dialog-content" :style="{top:topDistance+&#39;%&#39;,width:widNum+&#39;%&#39;,left:leftSite+&#39;%&#39;}" v-if="isShow">
   <p class="dialog_head back">
    <!--弹窗头部 title-->
    <slot name="header">提示信息</slot>
   </p>
   <p class="dialog_main" :style="{paddingTop:pdt+&#39;px&#39;,paddingBottom:pdb+&#39;px&#39;}">
   <!--弹窗的内容-->
   <slot name="main">弹窗内容</slot>
   </p>
   <!--弹窗关闭按钮-->
   <p class="foot_close" @click="closeMyself">
    <p class="close_img back"></p>
   </p>
  </p>
 </transition>
 </p>
</template>

로그인 후 복사

다음은 컴포넌트의 주요 CSS 스타일입니다. 마스킹 효과는 주로 z-index 및 배경을 통해 달성됩니다. 특정 콘텐츠의 CSS는 필요에 따라 설정할 수 있습니다.

<style lang="scss" scoped>
 // 最外层 设置position定位 
 .dialog {
 position: relative;
 color: #2e2c2d;
 font-size: 16px;
 }
 // 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
 .dialog-cover {
 background: rgba(0,0,0, 0.8);
 position: fixed;
 z-index: 200;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 // 内容层 z-index要比遮罩大，否则会被遮盖，
 .dialog-content{
 position: fixed;
 top: 35%;
 // 移动端使用felx布局 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 300;
 }
</style>

로그인 후 복사

2. 슬롯을 통해 팝업 콘텐츠를 맞춤화하세요

이 단계에서는 슬롯의 역할과 사용법을 이해하는 한 문제가 없습니다.

싱글 슬롯:

슬롯이 전달되지 않았을 때 표시되는 팝업 콘텐츠입니다
위는 기본 슬롯이라고도 불리는 단일 슬롯으로, 에서 사용되는 슬롯입니다. 상위 구성요소 슬롯의 올바른 자세:

<my-component>
 <!--在my-component里面的所有内容片段都将插入到slot所在的DOM位置，并且会替换掉slot标签-->
 <!--这两个p标签，将替换整个slot标签里面的内容-->
 <p>这是一些初始内容</p>
 <p>这是更多的初始内容</p>
</my-component>

로그인 후 복사

ps: 하위 구성요소에 슬롯이 포함된 경우 위의 p 태그 내용은 삭제됩니다.

이름이 지정된 슬롯:

이름이 지정된 슬롯은 슬롯 태그에 이름 속성을 할당하는 것입니다. 이름이 지정된 슬롯은 상위 구성 요소의 다양한 콘텐츠 조각을 하위 구성 요소의 다른 위치에 배치할 수 있습니다. 기본 슬롯. 팝업 컴포넌트 슬롯의 사용법은 다음과 같습니다.

<p class="dialog_head back ">
 <!--弹窗头部 title-->
 <slot name="header">提示信息</slot>
 </p>
 <p class="dialog_main " :style="{paddingTop:pdt+&#39;px&#39;,paddingBottom:pdb+&#39;px&#39;}">
 <!--弹窗的内容-->
 <slot name="main">弹窗内容</slot>
 </p>

로그인 후 복사

상위 컴포넌트에서 사용하는 방법:

사용하려는 컴포넌트에 팝업 컴포넌트를 삽입하고 컴포넌트를 통해 컴포넌트로 등록합니다. .
상위 컴포넌트의 팝업 컴포넌트 슬롯을 사용하는 방법은 다음과 같습니다.

<dialogComponent>
 <p slot="header">插入到name为header的slot标签里面</p>
  <p class="dialog_publish_main" slot="main">
  这里是内容插入到子组件的slot的name为main里面，可以在父组件中添加class定义样式，事件类型等各种操作
  </p>
</dialogComponent>

로그인 후 복사

컴포넌트에 사용되는 슬롯 소개는 여기까지입니다. 팝업 컴포넌트에 슬롯을 적용하는 것이 대표적인 예입니다. 슬롯의 성능은 상당히 강력하지만, 슬롯 자체의 사용법은 어렵지 않습니다. 학생들이 슬롯과 사랑에 빠졌나요?

3. 팝업 창 가시성을 제어하고 팝업 창 스타일을 사용자 정의하려면 소품을 사용하세요.

psops는 Vue의 상위 구성 요소가 하위 구성 요소에 데이터를 전송하는 방법입니다. 소품 문서.

팝업 구성 요소는 다른 구성 요소에 도입되어 사용되기 때문에 다양한 구성 요소 시나리오의 팝업 창에 적합하도록 팝업 구성 요소는 어느 정도 사용자 정의가 가능해야 합니다. 그렇지 않으면 이러한 구성 요소는 의미가 없게 됩니다. 팝업 컴포넌트를 예로 들어 props 사용 방법:

먼저 전달된 컴포넌트에서 검증과 같은 props의 몇 가지 특성을 정의해야 합니다.
그런 다음 상위 구성 요소에 props 데이터를 바인딩합니다.

<script>
export default {
 props: {
 isShow: { 
 //弹窗组件是否显示 默认不显示
  type: Boolean,
  default: false,
  required:true, //必须
 },
 //下面这些属性会绑定到p上面 详情参照上面的html结构
 // 如： :style="{top:topDistance+'%',width:widNum+'%'}"
 widNum:{ 
 //内容宽度
  type: Number,
  default:86.5
 },
 leftSite:{
  // 左定位
  type: Number,
  default:6.5
 },
 topDistance: {
  //top上边距
  type: Number,
  default:35
 },
 pdt:{
  //上padding
  type: Number,
  default:22
 },
 pdb:{
  //下padding
  type: Number,
  default:47
 }
 },
}
</script>

로그인 후 복사

상위 구성 요소에 사용됨:

<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum">
</dialogComponent>

로그인 후 복사

ps：props传递数据不是双向绑定的，而是单向数据流，父组件的数据变化时，也会传递到子组件中，这就意外着我们不应该在子组件中修改props。所以我们在关闭弹窗的时候就需要通过 $emit 来修改父组件的数据，然后数据会自动传到子组件中。

现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。

4. $emit 触发父组件事件修改数据，关闭弹窗

Vue中在子组件往父组件传参，很多都是通过 $emit 来触发父组件的事件来修改数据。

在子组件中，在点击关闭，或者遮罩层的时候触发下面这个方法：

methods: {
 closeMyself() {
  this.$emit("on-close"); 
  //如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
 }
 }

로그인 후 복사

父组件中的写法：

<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum" @on-close="closeDialog"> 
 </dialogComponent>
 //"on-close是监听子组件的时间有没有触发，触发的时候执行closeDialog函数
methods:{
 closeDialog(){
 // this.status.isShowPublish=false;
 //把绑定的弹窗数组 设为false即可关闭弹窗
 },
}

로그인 후 복사

可以用弹窗组件实现下列这种信息展示，或者事件交互：