关于 Alert 组件开发相关

[Tyh2001]

Alert 提示

Attributes

• type 类型
• size 文字大小
• bold 是否加粗
• center 是否居中
• icon 带有 icon
• close 可关闭
• simple 简约的
• title 标题
• round 圆角
• background 自定义背景色
• color 自定义文字颜色

Slots

插槽默认是副标题，主标题使用 title 属性

设计稿

https://www.figma.com/file/4puDOb4F1lZV89xRWdGWbf/Alert-%E6%8F%90%E7%A4%BA?node-id=3%3A27

[Tyh2001]

Alert 由 jardeng 进行开发

@jardeng

#83 问题如下：

1. 正常状态下文字不是垂直居中的

可以放大仔细查看

效果：

代码片段：

<f-alert type="default">默认提示信息</f-alert>
<f-alert type="primary">主要提示信息</f-alert>
<f-alert type="success">成功提示信息</f-alert>
<f-alert type="danger">危险提示信息</f-alert>
<f-alert type="warning">警告提示信息</f-alert>

2. 当传入 close，没有传入 title 的时候，会出现样式问题，其实可以将关闭按钮进行定位处理，现在使用的是 flex

效果：

代码片段：

<f-alert close type="default">默认提示信息</f-alert>
<f-alert close type="primary">主要提示信息</f-alert>
<f-alert close type="success">成功提示信息</f-alert>
<f-alert close type="danger">危险提示信息</f-alert>
<f-alert close type="warning">警告提示信息</f-alert>

3. 简约的效果文字颜色改为正常状态的背景色，不是黑色

效果：

代码片段：

<f-alert simple type="default">默认提示信息</f-alert>
<f-alert simple type="primary">主要提示信息</f-alert>
<f-alert simple type="success">成功提示信息</f-alert>
<f-alert simple type="danger">危险提示信息</f-alert>
<f-alert simple type="warning">警告提示信息</f-alert>

[Tyh2001]

更新前先拉取最新代码，我改了一些地方

[Tyh2001]

新增固定定位配置项

Attributes

• fixed 是否固定定位
• fixed-position 固定定位的位置，object 类型，分别可以传入 top left right bottom 四项可选参数进行定位，参数仅在 fixed 为 true 时生效，类型使用 interface 进行校验

[Tyh2001]

新增固定定位配置项

Attributes

• fixed 是否固定定位
• fixed-position 固定定位的位置，object 类型，分别可以传入 top left right bottom 四项可选参数进行定位，参数仅在 fixed 为 true 时生效，类型使用 interface 进行校验

[Tyh2001]

2022-07-28 新增配置项

overflow 配置项，用于文字超出后的展示状态

可选值

• hidden 超出隐藏
• roll 文字无限滚动
• ellipsis 结尾显示 ... 进行省略

如果不传递 overflow 参数则默认换行显示

[Tyh2001]

还有需要将 size 配置项改为 font-size