更新记录
1.0.0(2020-10-26) 下载此版本
微信小程序啥时候能直接支持svg
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 2.8.3 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
组件在components目录下upload-btn文件夹中
组件注册
<upload-btn :options="options" ref="upload" @click.native="onClick" @uploaded="uploaded"></upload-btn>
组件调用
onClick () {
clearInterval(this.timer)
this.options.progress = 0
// 触发按钮的点击
this.$refs['upload'].handlerBtn()
// 模拟上传进度
this.timer = setInterval(() => {
if (this.options.progress < 1) {
this.options.progress += 0.005
} else {
clearInterval(this.timer)
}
},20)
},
上传回调
uploaded () {
console.log('uploaded:','上传成功!')
}
options(必传)属性说明
属性名 | 类型 | 说明 |
---|---|---|
scale | Number | 按钮缩放比例;取值:(0,1] |
firstGradColor | String | 按钮渐变背景色第一个值 |
secGradColor | String | 按钮渐变背景色第二个值 |
progress | Number | 上传进度;取值:[0,1] |
firtProgressColor | String | 进度条渐变背景色第一个值 |
secProgressColor | String | 进度条渐变背景色第二个值 |