Skip to content

Commit

Permalink
fix: 修复图片加载类的死循环问题 👍👍
Browse files Browse the repository at this point in the history
  • Loading branch information
Tyh2001 committed Aug 28, 2022
1 parent dcb9b6c commit 3f47131
Show file tree
Hide file tree
Showing 15 changed files with 41 additions and 146 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
- 优化 `f-alert` 样式细节
- 优化 `f-alert` 组件 `overflow` 配置项
- 移除 `f-alert` 组件 `overflow` 配置项的 `roll` 可选参数
- 移除 `f-novel-coronavirus` 组件
- 修复 `Load` 图片加载类加载死循环的问题
- 优化 `f-image` 组件加载过程中是撕裂样式

## 0.6.2-alpha.2 (2022-08-20)

Expand Down
6 changes: 1 addition & 5 deletions docs/docs/.vitepress/utils/sidebar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,7 @@ export const sidebar = {
{ text: 'Text 文本', link: '/components/text' },
{ text: 'Layout 布局', link: '/components/layout' },
{ text: 'Space 间距', link: '/components/space' },
{ text: 'Color 色彩', link: '/components/color' },
{
text: 'Novel Coronavirus 新型冠状病毒',
link: '/components/novel-coronavirus'
}
{ text: 'Color 色彩', link: '/components/color' }
]
},
{
Expand Down
38 changes: 13 additions & 25 deletions docs/docs/components/button.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Button 按钮

`Button` 是一个灵活的按钮组件
点不坏的按钮

- [源代码](https://github.com/FightingDesign/fighting-design/tree/master/packages/fighting-design/button)
- [文档编辑](https://github.com/FightingDesign/fighting-design/blob/master/docs/docs/components/button.md)
Expand Down Expand Up @@ -193,34 +193,24 @@

## 带有阴影

你可以自定义按钮的阴影样式,可传入一个原生 [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) 属性值
可以自定义按钮的阴影样式,可传入一个原生 [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) 属性值

或者也可以通过 [Neumorphism](https://neumorphism.io) 自己手动调节阴影样式

<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="default">默认按钮</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="primary">主要按钮</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="success">成功按钮</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="danger">危险按钮</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="warning">警告按钮</f-button>
<f-button shadow="0 2px 7px 0 #f0f0f0" type="default">默认按钮</f-button>
<f-button shadow="0 2px 7px 0 #2d5af1" type="primary">主要按钮</f-button>
<f-button shadow="0 2px 7px 0 #52b35e" type="success">成功按钮</f-button>
<f-button shadow="0 2px 7px 0 #ff0200" type="danger">危险按钮</f-button>
<f-button shadow="0 2px 7px 0 #fcc202" type="warning">警告按钮</f-button>

::: details 显示代码

```html
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="default">
默认按钮
</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="primary">
主要按钮
</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="success">
成功按钮
</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="danger">
危险按钮
</f-button>
<f-button shadow="7px 7px 15px #dcdcdc,-7px -7px 15px #e4e4e4" type="warning">
警告按钮
</f-button>
<f-button shadow="0 2px 7px 0 #f0f0f0" type="default">默认按钮</f-button>
<f-button shadow="0 2px 7px 0 #2d5af1" type="primary">主要按钮</f-button>
<f-button shadow="0 2px 7px 0 #52b35e" type="success">成功按钮</f-button>
<f-button shadow="0 2px 7px 0 #ff0200" type="danger">危险按钮</f-button>
<f-button shadow="0 2px 7px 0 #fcc202" type="warning">警告按钮</f-button>
```

:::
Expand Down Expand Up @@ -292,9 +282,7 @@

`color` 属性可以自定义按钮的颜色,使用自定义颜色之后,`simple``text` 将不会再继续工作,不过自定义颜色仅支持 [hex](https://baike.baidu.com/item/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E9%A2%9C%E8%89%B2%E7%A0%81/10894232?fr=aladdin) 格式的色号

使用自定义颜色之后 `Fighting Design` 会自动推断 `hover``active` 的效果

那么你需要使用 `font-color` 来自定义文字的颜色
使用自定义颜色之后 `Fighting Design` 会自动推断 `hover``active` 的效果,那么需要使用 `font-color` 来自定义文字的颜色

<f-button font-color="#fff" color="#ff0de5" round>自定义颜色</f-button>
<f-button font-color="#fff" color="#22c1c3" loading>loading</f-button>
Expand Down
6 changes: 1 addition & 5 deletions docs/docs/components/icon.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Icon 图标

:::danger
Icon 图标将会在近期版本中永久弃用,请谨慎使用!
::::

`Icon` 用于展示网页中的小图标
一个小图标组件

- [源代码](https://github.com/FightingDesign/fighting-design/tree/master/packages/fighting-design/icon)
- [文档编辑](https://github.com/FightingDesign/fighting-design/blob/master/docs/docs/components/icon.md)
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/components/link.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Link 链接

`Link` 用于超链接跳转
一个超链接

- [源代码](https://github.com/FightingDesign/fighting-design/tree/master/packages/fighting-design/link)
- [文档编辑](https://github.com/FightingDesign/fighting-design/blob/master/docs/docs/components/link.md)
Expand Down Expand Up @@ -164,7 +164,7 @@
| `no-copy` | 是否禁止 copy | boolean | —— | false |
| `no-link` | 是否禁止链接跳转及重新加载(取消默认事件) | boolean | —— | false |

## Link Slots
## Slots

| 名称 | 说明 |
| --------- | ----------- |
Expand Down
14 changes: 0 additions & 14 deletions docs/docs/components/novel-coronavirus.md

This file was deleted.

5 changes: 4 additions & 1 deletion packages/fighting-design/_utils/load-image.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ class Load implements LoadInterface {
*/
loadCreateImg = (errSrc?: string): void => {
const newImg: HTMLImageElement = new Image()

if (errSrc) {
newImg.src = errSrc
} else {
Expand All @@ -62,7 +63,9 @@ class Load implements LoadInterface {
onerror = (evt: Event): void => {
// 如果存在 errSrc 则继续尝试加载
if (this.props.errSrc) {
return this.loadCreateImg(this.props.errSrc)
this.loadCreateImg(this.props.errSrc)
this.props.errSrc = ''
return
}

// 否则返回失败回调
Expand Down
2 changes: 1 addition & 1 deletion packages/fighting-design/avatar/src/avatar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
:class="nodeClassList"
:alt="alt"
src=""
/>
>
</div>

<div v-else class="f-avatar-error" :style="imageSizeStyleList">
Expand Down
3 changes: 0 additions & 3 deletions packages/fighting-design/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,6 @@ export type { FPageHeaderInstance } from './page-header'
export { default as FAlert } from './alert'
export type { FAlertInstance } from './alert'

export { default as FNovelCoronavirus } from './novel-coronavirus'
export type { FNovelCoronavirusInstance } from './novel-coronavirus'

export { default as FList } from './list'
export type { FListInstance } from './list'

Expand Down
5 changes: 4 additions & 1 deletion packages/fighting-design/image/src/image.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
const FImageImg: Ref<HTMLImageElement> = ref<HTMLImageElement>(
null as unknown as HTMLImageElement
)
const isShowNode: Ref<boolean> = ref<boolean>(prop.lazy)
// 点击图片时候 开启大图预览
const handleClick: b = (): void => {
Expand All @@ -44,6 +45,7 @@
const node: HTMLImageElement = FImageImg.value as HTMLImageElement
const callback: a = (params: boolean, width: number): void => {
isSuccess.value = params
isShowNode.value = params
captionWidth.value = width
}
Expand All @@ -65,6 +67,7 @@
<template>
<div v-if="isSuccess" :class="['f-image', { 'f-image-block': block }]">
<img
v-show="isShowNode"
ref="FImageImg"
src=""
:class="[
Expand All @@ -80,7 +83,7 @@
:referrer-policy="referrerPolicy"
:alt="alt"
@click="handleClick"
/>
>

<div
v-if="caption"
Expand Down
9 changes: 0 additions & 9 deletions packages/fighting-design/novel-coronavirus/index.ts

This file was deleted.

This file was deleted.

1 change: 0 additions & 1 deletion packages/fighting-theme/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
@use './src/list.scss';
@use './src/toolbar.scss';
@use './src/message.scss';
@use './src/novel-coronavirus';
@use './src/watermark.scss';
@use './src/empty.scss';
@use './src/skeleton.scss';
26 changes: 0 additions & 26 deletions packages/fighting-theme/src/novel-coronavirus.scss

This file was deleted.

39 changes: 12 additions & 27 deletions start/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,17 @@
<script lang="ts" setup></script>

<template>
<div class="action">
<f-button type="primary" size="large" href="/docs/install">
开始使用
</f-button>
<f-button
class="code"
type="primary"
size="large"
blob
simple
data-clipboard-text="npm i filling-design"
>
pnpm add filling-design
</f-button>
</div>
<!-- <f-image
width="200px"
src="https://abc.com/1.png"
err-src="https://tianyuhao.cn/images/auto/1.jpg"
/> -->
<f-image
width="200px"
src="https://abc.com/1.png"
err-src="https://abc.com/1.png"
alt="error"
/>
</template>

<style lang="scss" scoped>
.action {
margin-top: 30px;
display: flex;
align-items: center;
.code {
margin-left: 17px;
font-size: 21px;
}
}
</style>
<style lang="scss" scoped></style>

0 comments on commit 3f47131

Please sign in to comment.