封装前端UI组件库--dialog

1、前言

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

2、自定义插槽的实现

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

1、使用

123
我是内容

2、dialog组件定义

3、控制dialog的显示隐藏

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

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

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

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

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

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

4、动画的实现

1. 将要实现动画的代码块用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;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！