1. 全栈程序员必看首页

封装前端UI组件库–dialog

全栈程序员-站长 • • 未分类 • 阅读 3

封装前端UI组件库–dialog1 前言 dialog 弹窗组件库的实现 目前包括自定义内容 提示语 内容 底部按钮 弹窗的宽高等等 其中提示语 内容 弹窗的宽高的实现与 button 极其类似 请看上文 实现原理都是调用的时候传入参数 在自定义组件里面接收参数 根据参数再做具体的操作等等 2 自定义插槽的实现由于需要自定义传入的参数 提示语 内容 底部按钮都需要插槽传入 过多 接收的时候又都是用来接 所以为了区分需要用到自定义插槽 给插槽取个名字 1 使用

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; } }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232304.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号