1、cube-ui 是基于 Vue.js 实现的精致移动端组件库,由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。
2、在vuecli创建的项目中使用的方法是:
cd vue-cube
vue add cube-ui
1.基础用法
<cube-upload
ref="upload1"
v-model="files1"
:action="action"
:multiple="false"
:simultaneous-uploads="1"
:process-file="processFile"
@files-added="addedHandler1"
@file-error="errHandler"
@file-success="uploadSuccess1"
@file-click="fileClick" //缩略图
>
2.自定义样式
<cube-upload
ref="upload1"
v-model="files1"
:action="action"
:multiple="false"
:simultaneous-uploads="1"
:process-file="processFile"
@files-added="addedHandler1"
@file-error="errHandler"
@file-success="uploadSuccess1"
>
<cube-upload-file
v-for="(file, i) in files1"
:file="file"
:key="i"
@click="fileClick" //缩略图
></cube-upload-file>
<cube-upload-btn :multiple="false">
<img src="~@/icons/camera.svg" />
<span>证件正面</span>
</cube-upload-btn>
</cube-upload>
自定义样式实现缩略图关键为该css样式,提交图片后会自动显示该样式
/deep/ .cube-upload-file-status.cubeic-right::after {
width: 165px
height: 110px
border-radius: 0
background-color: #fff0
}
以下为公用方法
uploadSuccess1(res) {
this.imgs = []
this.imgs.push(res.url)
}
fileClick() {
this.$createImagePreview({ //cube-ui 自带图片预览
imgs: this.imgs
}).show()
},
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)