封装前端UI组件库--dialog

china-yun

已于 2023-05-06 16:39:03 修改

阅读量10w+

点赞数 1

分类专栏：封装前端UI库文章标签：前端 ui 动画

于 2021-07-02 13:37:04 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Yun__shen/article/details/118412742

版权

封装前端UI库专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍了如何实现一个自定义的Vue dialog组件，包括内容、宽高、插槽的自定义，以及如何通过插槽传递提示语、内容和底部按钮。此外，还详细阐述了如何控制dialog的显示隐藏，使用$emit和.sync修饰符进行父子组件间的通信，并通过CSS实现了过渡动画效果。

摘要由CSDN通过智能技术生成

1、前言

在这里插入图片描述

dialog弹窗组件库的实现、目前包括自定义内容（提示语、内容、底部按钮、弹窗的宽高等等）、其中提示语、内容、弹窗的宽高的实现与button极其类似、请看上文（实现原理都是调用的时候传入参数、在自定义组件里面接收参数、根据参数再做具体的操作等等）。

2、自定义插槽的实现

由于需要自定义传入的参数（提示语、内容、底部按钮都需要插槽传入）过多、接收的时候又都是用来接、所以为了区分需要用到自定义插槽（给插槽取个名字）

1、使用

<my-dialog
      width="60%"
      top="200px"
      >
      <h3 slot="title">123</h3>
      <div>我是内容</div>
    </my-dialog>

2、dialog组件定义

  <div v-if="$slots.title">
            <slot name="title"></slot>
  </div>

3、控制dialog的显示隐藏

1、在调用的时候传入用于控制显示隐藏的值 visible

2、在dialog组件接收该参数、显示隐藏的逻辑控制全部写在dialog组件里面

3、因此涉及到的问题就是子组件需要修改父组件的值（相当于组件的值传递，子—>父）

子组件向父组件发射一个事件

handleClick() {
      this.$emit("update:visible", false);
},

父组件使用sync语法糖直接就可修改

 <my-dialog
      :visible.sync="visible"
 >

4、动画的实现

将要实现动画的代码块用transition包裹

 <transition name="dialog-fade"> </transition>

css实现动画

//动画实现
.dialog-fade-enter-active {    //进入的动画
  animation: run 0.1s;
}
.dialog-fade-leave-active {    //离开的动画
  animation: run 0.1s reverse;
}
@keyframes run {    //动画
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}