Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
90302223
C
cube-ui
项目概览
DiDi
/
cube-ui
11 个月 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
90302223
编写于
4月 19, 2018
作者:
D
dolymood
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update(doc): upload add custom case
上级
148614fd
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
86 addition
and
3 deletion
+86
-3
document/components/docs/en-US/upload.md
document/components/docs/en-US/upload.md
+86
-3
未找到文件。
document/components/docs/en-US/upload.md
浏览文件 @
90302223
...
...
@@ -54,14 +54,14 @@
```
html
<cube-upload
ref=
"upload
2
"
:action=
"action
2
"
ref=
"upload"
:action=
"action"
:simultaneous-uploads=
"1"
:process-file=
"processFile"
@
file-submitted=
"fileSubmitted"
></cube-upload>
```
```
js
import
compress
from
'
../modules/image
'
import
compress
from
'
../
../
modules/image
'
export
default
{
data
()
{
return
{
...
...
@@ -94,6 +94,89 @@
The
`file-submitted`
event will be trigged after the file is processed and added to the
`upload.files`
with a parameter -- the file object.
-
Use slots
You can use slots to define your custom HTML structure.
```
html
<cube-upload
ref=
"upload"
v-model=
"files"
:action=
"action"
@
files-added=
"addedHandler"
@
file-error=
"errHandler"
>
<div
class=
"clear-fix"
>
<cube-upload-file
v-for=
"(file, i) in files"
:file=
"file"
:key=
"i"
></cube-upload-file>
<cube-upload-btn
:multiple=
"false"
>
<div>
<i>
+
</i>
<p>
Please click to upload ID card
</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
```
```
js
export
default
{
data
()
{
return
{
action
:
'
//jsonplaceholder.typicode.com/photos/
'
,
files
:
[]
}
},
methods
:
{
addedHandler
()
{
const
file
=
this
.
files
[
0
]
file
&&
this
.
$refs
.
upload
.
removeFile
(
file
)
},
errHandler
(
file
)
{
// const msg = file.response.message
this
.
$createToast
({
type
:
'
warn
'
,
txt
:
'
Upload fail
'
,
time
:
1000
}).
show
()
}
}
}
```
Custom Style:
```
stylus
.cube-upload
.cube-upload-file, .cube-upload-btn
margin: 0
height: 200px
.cube-upload-file
margin: 0
+ .cube-upload-btn
margin-top: -200px
opacity: 0
.cube-upload-file-def
width: 100%
height: 100%
.cubeic-wrong
display: none
.cube-upload-btn
display: flex
align-items: center
justify-content: center
> div
text-align: center
i
display: inline-flex
align-items: center
justify-content: center
width: 50px
height: 50px
margin-bottom: 20px
font-size: 32px
line-height: 1
font-style: normal
color: #fff
background-color: #333
border-radius: 50%
```
### Props configuration
| Attribute | Description | Type | Accepted Values | Demo |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录