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