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; } } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232304.html原文链接：https://javaforall.net
