-
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(upload): complete upload component
1 parent
90918bd
commit 536e209
Showing
12 changed files
with
655 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
.bigbear-upload-list{ | ||
padding: 10px; | ||
.bigbear-upload-li{ | ||
list-style-type: none; | ||
.bigbear-alert > span:nth-child(1){ | ||
font-size: $font-size-sm; | ||
} | ||
.bigbear-progress-wrapper{ | ||
@include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2); | ||
border:none; | ||
} | ||
} | ||
} | ||
.bigbear-alert.upload-success{ | ||
color:$success; | ||
} | ||
.bigbear-alert.upload-failed{ | ||
color:$danger; | ||
} | ||
.bigbear-upload-input{ | ||
margin-bottom: 5px; | ||
} | ||
.bigbear-upload-showchoose{ | ||
margin-top: 10px; | ||
margin-bottom: 10px; | ||
} | ||
.bigbear-upload-btn{ | ||
display: inline-block; | ||
} | ||
|
||
.bigbear-upload-imageli{ | ||
display: inline-block; | ||
.bigbear-avatar { | ||
text-align: center; | ||
line-height:$avatar-size-lg - $avatar-padding-lg*2; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import Upload from "./upload"; | ||
|
||
export default Upload; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks'; | ||
import Upload from './upload'; | ||
|
||
|
||
|
||
<Meta title='ENTRY| Upload 上传' component={Upload} /> | ||
|
||
<br/> | ||
|
||
# Upload 上传 | ||
|
||
<br/> | ||
|
||
## 基本使用 | ||
|
||
<Preview> | ||
<Story name='upload'> | ||
<Upload successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload> | ||
</Story> | ||
</Preview> | ||
|
||
## 上传进度 | ||
|
||
type='progress'可以下方附加进度信息。 | ||
|
||
注意uid需要唯一 | ||
|
||
<Preview> | ||
<Story name='onProgress'> | ||
<Upload filename={()=>'avatar'} | ||
defaultProgressBar={[{ | ||
filename: 'hello.md', | ||
percent: 100, | ||
status: "success", | ||
uid: '111', | ||
size: 1222, | ||
raw: null | ||
},{ | ||
filename: 'hello2.md', | ||
percent: 0, | ||
status: "failed", | ||
uid: '1112', | ||
size: 12222, | ||
raw: null | ||
},{ | ||
filename: 'hello3.md', | ||
percent: 40, | ||
status: "upload", | ||
uid: '1113', | ||
size: 12222, | ||
raw: null | ||
},{ | ||
filename: 'hello4.md', | ||
percent: 80, | ||
status: "upload", | ||
uid: '11132', | ||
size: 12222, | ||
raw: null | ||
} | ||
]} | ||
type={'progress'} | ||
successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload> | ||
</Story> | ||
</Preview> | ||
|
||
|
||
## 确认上传 | ||
|
||
confirm 为 true 可进行分段上传 | ||
|
||
<Preview> | ||
<Story name='upload3'> | ||
<Upload filename={()=>'avatar'} confirm={true} successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload> | ||
</Story> | ||
</Preview> | ||
|
||
|
||
## 图片回显 | ||
|
||
文件验证需要自行添加 | ||
|
||
传入uploadNumber可以控制最大上传数量 | ||
|
||
<Preview> | ||
<Story name='img'> | ||
<Upload filename={()=>'avatar'} confirm={true} type='img' | ||
uploadNumber={3} | ||
defaultProgressBar={[{ | ||
filename: 'hello.md', | ||
percent: 100, | ||
status: "success", | ||
uid: '111', | ||
size: 1222, | ||
raw: null | ||
},{ | ||
filename: 'hello2.md', | ||
percent: 0, | ||
status: "failed", | ||
uid: '1112', | ||
size: 12222, | ||
raw: null | ||
},{ | ||
filename: 'hello3.md', | ||
percent: 40, | ||
status: "upload", | ||
uid: '1113', | ||
size: 12222, | ||
raw: null | ||
},{ | ||
filename: 'hello4.md', | ||
percent: 80, | ||
status: "upload", | ||
uid: '11132', | ||
size: 12222, | ||
raw: null | ||
} | ||
]} | ||
successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload> | ||
</Story> | ||
</Preview> | ||
|
||
<Preview> | ||
<Story name='img2'> | ||
<Upload filename={()=>'avatar'} type='img' | ||
successCallback={(e)=>console.log(e)} failCallback={(e)=>console.log(e)} ></Upload> | ||
</Story> | ||
</Preview> | ||
|
||
|
||
<Props of={Upload}></Props> |
Oops, something went wrong.