关于 Dialog 组件开发相关

[Tyh2001]

Dialog 对话框

设计稿：https://www.figma.com/file/GZBgOcKrcsQAive1cnn1EF/Dialog-%E5%AF%B9%E8%AF%9D%E6%A1%86?node-id=0%3A1

[wmasfoe]

功能

Dialog 组件在保留当前页面状态的情况下，告知用户相关信息并进行一些操作。

参数

参数	类型	说明
title	string	标题
visible	boolean	是否显示 dialog
width	number	宽度
fullscreen	boolean	是否全屏
modal	boolean	是否需要遮罩
lock-scroll	boolean	是否锁定滚动条
append-body	boolean	是否添加到 body
show-close	boolean	是否显示关闭图标
text	string	提示文本

插槽

• content: dialog 内容，存在时覆盖 text 参数

[Tyh2001]

• modal-close 点击遮罩层是否可关闭

[Tyh2001]

其他没问题

[lzyaom]

• top Dialog CSS 中的 margin-top 值

[Tyh2001]

默认 margin-top: 13vh; 也变成可配置选项

[wmasfoe]

有个问题，dialog 下面的操作按钮应该是用 FButton 组件吧，目前看来 ui 上高度有点小 (17px)，FButton mini 模式最小高度是 25px。
用 CSS 覆盖 FButton 样式吗？
还是 ui 层面做下修改

[Tyh2001]

这个直接使用默认按钮尺寸即可，无需那么多细节，我画的设计稿也不是那么专业，就是实现了大致的效果

[Tyh2001]

@RIN-NOHARA

#67 看过了，目前存在几个问题：

• 现在点击遮罩层和关闭按钮不能关闭弹窗，会有警告日志
• 关闭的并不是 x 字母，而是一个 icon，icon 可以在 官网 Icon 图标 查看到
• props 中的 width 中的宽度参数，可以将数字改完字符串类型，因为有时候的单位不一定是 px 传入字符串的话可以直接让用户自定义想要的单位
• 还有四个回到参数忘记写了，这个可以通过 transition 来实现

事件名称	说明	回调参数
open	打开时的回调	——
onOpen	打开动画结束时的回调	——
close	关闭时的回调	——
onClose	关闭动画结束时的回调	——

• 另外需要再新增 appendToBody 配置项，是否镶嵌到 body 上

现在暂时这么些，这个组件其实复杂度还是比较高一些的，后续可能还需要更改

[Tyh2001]

回调参数事件名更改

事件名称	说明	回调参数
open -> open	打开时的回调	——
onOpen -> open-end	打开动画结束时的回调	——
close -> close	关闭时的回调	——
onClose -> close-end	关闭动画结束时的回调	——

[Tyh2001]

其他还有层级关系的问题，也需要考虑

[Tyh2001]

组件可以再 start 中测试一下

[Tyh2001]

72d9c3b

修复了回调参数 可以看一下~

@RIN-NOHARA

[Tyh2001]

3c840f9

• 修复了一些类名的样式，类名都要在 f-dialog 基础上增加
• 下面这种的，有默认类名，和动态类名的，可以直接先写成一个

<!-- 不合法的 -->
<div
  class="f-dialog"
  :class="{
    'f-dialog-shadow': !modal
  }"
></div>

<!-- 合法的 -->
<div
  :class="[
    'f-dialog',
    {
      'f-dialog-shadow': !modal
    }
  ]"
></div>

@RIN-NOHARA

[Tyh2001]

2022-09-20 迭代

需要修复的问题

• 弹出需要加入动画，从小到大的过度动画
• 默认宽度改为 521px
• 当浏览器宽度小于 521px 的时候，需要使用媒体查询控制宽度
• header 和 footer 默认高度改为 50px

新增配置

• modal-blur 是否高斯模糊遮罩层

[Tyh2001]

更新完成之后将自己加到 Contributors 中

[wmasfoe]

顺便把我的 Contributors 改成 https://github.com/wmasfoe 感谢 👀

[Tyh2001]

顺便把我的贡献者改成https://github.com/wmasfoe感谢👀

嚯，github 还能改用户名？