浏览 219
分享
上传组件 Uploader
基本用法
<template lang="html">
<main>
<div class="demo-hidden">
<za-panel>
<za-panel-header title="点击一次选择单张"></za-panel-header>
<za-panel-body>
<div class="uploader-wrapper" style="display:flex;padding:15px;">
<za-badge sup v-for= '(i, index) in files' class="uploader-item" shape='circle' :key='index' @click='remove(index)' style="display:inline-block;margin-right:15px;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;">
<za-icon type='wrong' slot='text' ></za-icon>
<div class='uploader-item-img'>
<a :href="i.thumbnail" target="_blank"><img :src="i.thumbnail" alt=""></a>
</div>
</za-badge>
<div class="uploader-wrapper">
<za-uploader
class="uploader-btn" style="display:flex;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;"
accept="image/jpg, image/jpeg, image/gif, image/png"
@change='handleChange'>
<za-icon type="add" style="fontSize:30px;"/>
</za-uploader>
</div>
</div>
</za-panel-body>
</za-panel>
<za-panel>
<za-panel-header title="点击一次选择多张"></za-panel-header>
<za-panel-body>
<div class="uploader-wrapper" style="display:flex;padding:15px;">
<za-badge sup v-for= '(i, index) in fileList' class="uploader-item" shape='circle' :key='index' @click='remove2(index)' style="display:inline-block;margin-right:15px;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;">
<za-icon type='wrong' slot='text'></za-icon>
<div class='uploader-item-img'>
<a :href="i.thumbnail" target="_blank"><img :src="i.thumbnail" alt=""></a>
</div>
</za-badge>
<div class="uploader-wrapper">
<za-uploader
v-if='fileList.length < 5'
multiple
class="uploader-btn"
style="display:flex;align-items: center;justify-content: center;width:74px;height:74px;border:2px dashed #ddd;"
:before-change='beforeChange'
accept="image/jpg, image/jpeg, image/gif, image/png"
@change='handleChangeMulti'>
<za-icon type="add" />
</za-uploader>
</div>
</div>
</za-panel-body>
</za-panel>
</div>
<za-toast :visible.sync='visible' :duration='1000'>删除成功</za-toast>
</main>
</template>
<script>
export default {
data() {
return {
files: [],
fileList: [],
visible: false,
}
},
methods: {
handleChange(data){
console.log(data);
this.files.push(data)
},
handleChangeMulti(dataList){
if(dataList.length + this.fileList.length > 5){
alert('超过5张')
this.fileList = this.fileList.concat(...(dataList.slice(0, 5 - this.fileList.length)));
}else{
this.fileList = this.fileList.concat(...dataList);
}
},
remove(index){
this.files.splice(index, 1);
this.visible = true
},
remove2(index){
this.fileList.splice(index, 1);
this.visible = true
},
beforeChange(){
if(this.fileList.length > 5){
alert('超过5张')
return false
}else{
alert('before change')
}
}
},
};
</script>
API
Uploader
属性 | 类型 | 默认值 | 可选值/参数 | 说明 |
---|---|---|---|---|
prefixCls | string | za-uploader | 类名前缀 | |
accept | string | 允许上传的附件格式 | ||
multiple | bool | false | 是否多选 | |
capture | string | 照相机camera , 摄像机camcorder , 录音microphone | 唤起的原生应用 | |
disabled | bool | false | 是否禁用 | |
before-change | func | 选择前触发的回调 |
Uploader Event
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 选择文件后触发的事件 | 1.file对象 |
评论列表