封装前端UI组件库--dialog

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、动画的实现

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

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

2. 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;
  }
}