提交 a0b1c8e9 作者: 方治民

feat: 优化视频上传组件,增加占位区允许控制 video 是否显示,解决原生组件层级过高覆盖问题

上级 535b1b1d
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<view class="fui-uploadv__wrap"> <view class="fui-uploadv__wrap">
<view class="fui-uploadv__item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in urls" <view class="fui-uploadv__item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in urls"
:key="index"> :key="index">
<view :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx',background:'#000'}" v-if="!showVideo"></view>
<video class="fui-upload__video" :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx'}" <video class="fui-upload__video" :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx'}"
:src="getVideoSrc(item)"></video> :src="getVideoSrc(item)" v-if="showVideo"></video>
<view class="fui-uploadv__del-wrap" :style="{width:width+'rpx'}" v-if="!isView"> <view class="fui-uploadv__del-wrap" :style="{width:width+'rpx'}" v-if="!isView">
<view class="fui-uploadv__flex-row" @tap.stop="reUpload(index)"> <view class="fui-uploadv__flex-row" @tap.stop="reUpload(index)">
<fui-icon name="checkbox" color="#fff" :size="32" v-if="progress[index]===100"></fui-icon> <fui-icon name="checkbox" color="#fff" :size="32" v-if="progress[index]===100"></fui-icon>
...@@ -49,6 +50,11 @@ ...@@ -49,6 +50,11 @@
type: [Number, String], type: [Number, String],
default: 320 default: 320
}, },
// 防止原生组件层级问题的视频显示
hideVideo: {
type: Boolean,
default: false
},
fileList: { fileList: {
type: Array, type: Array,
default () { default () {
...@@ -146,6 +152,7 @@ ...@@ -146,6 +152,7 @@
//preupload、uploading、success、error //preupload、uploading、success、error
status: [], status: [],
progress: [], progress: [],
showVideo: true,
}; };
}, },
created() { created() {
...@@ -154,7 +161,16 @@ ...@@ -154,7 +161,16 @@
watch: { watch: {
fileList(vals) { fileList(vals) {
this.initData(vals) this.initData(vals)
} },
hideVideo(value) {
if (value) {
this.showVideo = false
} else {
setTimeout(() => {
this.showVideo = true
}, 300)
}
}
}, },
computed: { computed: {
showAdd() { showAdd() {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论