Skip to content

Commit

Permalink
feat: upload-picker增加audio-picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@JDEast1029
JDEast1029 committed Jul 2, 2021
1 parent ccb9746 commit 0289d47
Show file tree
Hide file tree
Showing 16 changed files with 422 additions and 21 deletions.
4 changes: 2 additions & 2 deletions src/upload-picker/examples/basic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div style="margin: 100px;">
<vc-upload-picker
v-model="dataSource"
:picker="['image', 'video', 'file']"
:picker="['image', 'video', 'audio', 'file']"
>
<!-- 限制大小上传以及api -->
</vc-upload-picker>
Expand Down Expand Up @@ -80,7 +80,7 @@ VcInstance.init({
status: 1,
data: {
url: `https://wyatest.oss-cn-hangzhou.aliyuncs.com/${options.param.key}`,
...parseFile(file)
// ...parseFile(file)
}
}
: {
Expand Down
4 changes: 2 additions & 2 deletions src/upload-picker/examples/mobile-basic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<vc-upload-picker
v-model="dataSource"
:max="5"
:picker="['video', 'image', 'file']"
:picker="['video', 'image', 'audio', 'file']"
@remove-before="handleDel"
@success="handleSuccess"
>
Expand Down Expand Up @@ -75,7 +75,7 @@ VcInstance.init({
status: 1,
data: {
url: `https://wyatest.oss-cn-hangzhou.aliyuncs.com/${options.param.key}`,
...parseFile(file)
// ...parseFile(file)
}
}
: {
Expand Down
129 changes: 129 additions & 0 deletions src/upload-picker/item/audio-item.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<template>
<div
:class="{ 'is-error': it.status == 0 }"
class="vc-upload-picker-audio-item"
>
<slot :it="it">
<div v-if="typeof it !== 'object'">
<audio
:src="it"
:controls="false"
class="vc-upload-picker-audio-item__content"
style="background-color: #000;"
/>
<div class="vc-upload-picker-audio-item__play" @click="handlePreview">
<vc-icon type="toplay" class="vc-upload-picker-audio-item__play-icon" />
</div>
</div>
<div v-else class="vc-upload-picker-audio-item__content">
<vc-progress
v-if="it.percent && it.percent != 100"
:percent="it.percent"
:show-info="false"
status="normal"
style="width: 100%;padding: 0 5px"
/>
<p v-else-if="!it.url && it.percent == 100 && !it.errorFlag" style="line-height: 1; padding: 5px">
服务器正在接收...
</p>
<div v-else-if="it.status == 0" style="padding: 5px">
上传失败
</div>
</div>
<!-- 上传失败或者成功后显示 -->
<vc-icon
v-if="!disabled && (typeof it !== 'object' || it.status == 0)"
type="close-small"
class="vc-upload-picker__delete"
@click="handleDel"
/>
</slot>
</div>
</template>

<script>
import Icon from '../../icon/index';
import Progress from '../../progress/index';
import { AudioPreview } from "../preview/audio";
export default {
name: 'vc-upload-picker-audio-item',
components: {
'vc-icon': Icon,
'vc-progress': Progress
},
props: {
disabled: Boolean,
it: {
type: [String, Object, File],
default: ''
}
},
methods: {
handlePreview(e) {
AudioPreview.popup({
dataSource: [this.it]
});
},
handleDel() {
this.$emit('delete');
}
},
};
</script>

<style lang="scss">
@import '../../style/vars.scss';
@include block(vc-upload-picker-audio-item) {
position: relative;
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
color: #515a6e;
background-color: #000;
@include when(error) {
position: relative;
color: #f42626;
border: 1px solid #f42626;
@include when(mobile) {
color: #515a6e;
border: none;
}
}
@include element(content) {
@include commonFlexCc();
width: 64px;
height: 64px;
border-radius: 4px;
background-size: cover;
overflow: hidden;
}
@include element(play) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 24px;
height: 24px;
border: 1px solid #fff;
border-radius: 50%;
}
}
@include element(play-icon) {
margin-left: 2px;
color: #fff;
}
}
</style>
1 change: 1 addition & 0 deletions src/upload-picker/item/file-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default {
@include block(vc-upload-picker-file-item) {
position: relative;
background-color: #fafafa;
@include when(error) {
position: relative;
color: #f42626;
Expand Down
1 change: 1 addition & 0 deletions src/upload-picker/item/img-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export default {
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fafafa;
@include when(error) {
position: relative;
color: #f42626;
Expand Down
3 changes: 2 additions & 1 deletion src/upload-picker/item/video-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<script>
import Icon from '../../icon/index';
import Progress from '../../progress/index';
import { VideoPreview } from '../video-preview';
import { VideoPreview } from '../preview/video';
export default {
name: 'vc-upload-picker-video-item',
Expand Down Expand Up @@ -81,6 +81,7 @@ export default {
box-sizing: border-box;
flex-wrap: wrap;
color: #515a6e;
background-color: #fafafa;
@include when(error) {
position: relative;
color: #f42626;
Expand Down
117 changes: 117 additions & 0 deletions src/upload-picker/mobile/item/audio-item.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<template>
<div
:class="{ 'is-error': it.status == 0 }"
class="vcm-upload-picker-audio-item"
>
<slot :it="it">
<div v-if="typeof it !== 'object'">
<audio
:src="it"
:controls="false"
class="vcm-upload-picker-audio-item__content"
style="background-color: #000"
/>
<div class="vcm-upload-picker-audio-item__play" @click="handlePreview">
<vc-icon type="toplay" class="vcm-upload-picker-audio-item__play-icon" />
</div>
</div>
<div v-else class="vcm-upload-picker-audio-item__content">
<vc-spin v-if="typeof it.status === 'undefined'" />
<div v-else-if="it.status == 0" style="padding: 5px">
上传失败
</div>
</div>
<!-- 上传失败或者成功后显示 -->
<vc-icon
v-if="!disabled && (typeof it !== 'object' || it.status == 0)"
type="close"
class="vcm-upload-picker__delete"
@click="handleDel"
/>
</slot>
</div>
</template>

<script>
import Icon from '../../../icon/index';
import Spin from '../../../spin';
import { AudioPreview } from '../../preview/audio';
export default {
name: 'vcm-upload-picker-audio-item',
components: {
'vc-icon': Icon,
'vc-spin': Spin
},
props: {
disabled: Boolean,
it: {
type: [String, Object, File],
default: ''
}
},
methods: {
handlePreview(e) {
AudioPreview.popup({
dataSource: [this.it]
});
},
handleDel() {
this.$emit('delete');
}
},
};
</script>

<style lang="scss">
@import '../../../style/vars.scss';
@include block(vcm-upload-picker-audio-item) {
position: relative;
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
color: #515a6e;
background-color: #000000;
@include when(error) {
position: relative;
color: #f42626;
border: 1px solid #f42626;
}
@include element(content) {
@include commonFlexCc();
width: 78px;
height: 78px;
border-radius: 2px;
background-size: cover;
overflow: hidden;
}
@include element(play) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 24px;
height: 24px;
border: 1px solid #fff;
border-radius: 50%;
}
}
@include element(play-icon) {
margin-left: 2px;
color: #fff;
}
}
</style>
1 change: 1 addition & 0 deletions src/upload-picker/mobile/item/file-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export default {
@include block(vcm-upload-picker-file-item) {
position: relative;
background-color: #fafafa;
@include when(error) {
position: relative;
color: #f42626;
Expand Down
1 change: 1 addition & 0 deletions src/upload-picker/mobile/item/img-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ export default {
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fafafa;
@include when(error) {
position: relative;
color: #f42626;
Expand Down
3 changes: 2 additions & 1 deletion src/upload-picker/mobile/item/video-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<script>
import Icon from '../../../icon/index';
import Spin from '../../../spin';
import { VideoPreview } from '../../video-preview';
import { VideoPreview } from '../../preview/video';
export default {
name: 'vcm-upload-picker-video-item',
Expand Down Expand Up @@ -72,6 +72,7 @@ export default {
box-sizing: border-box;
flex-wrap: wrap;
color: #515a6e;
background-color: #fafafa;
@include when(error) {
position: relative;
color: #f42626;
Expand Down
10 changes: 9 additions & 1 deletion src/upload-picker/mobile/picker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
:imgs-preview-opts="imgsPreviewOpts"
:img-class-name="imgClassName"
:video-class-name="videoClassName"
:audio-class-name="audioClassName"
:file-class-name="fileClassName"
:url-key="urlKey"
:index="i"
Expand Down Expand Up @@ -42,6 +43,7 @@
:imgs-preview-opts="imgsPreviewOpts"
:img-class-name="imgClassName"
:video-class-name="videoClassName"
:audio-class-name="audioClassName"
:file-class-name="fileClassName"
:url-key="urlKey"
:index="index"
Expand Down Expand Up @@ -93,6 +95,7 @@ import Icon from '../../icon/index';
import SortList from '../../sort-list/index.m';
import ImgItem from './item/img-item';
import VideoItem from './item/video-item';
import AudioItem from './item/audio-item';
import FileItem from './item/file-item';

export default {
Expand Down Expand Up @@ -120,6 +123,12 @@ export default {
item: VideoItem
});
return pre;
case 'audio':
pre.push({
type: cur,
item: AudioItem
});
return pre;
case 'file':
pre.push({
type: cur,
Expand All @@ -146,7 +155,6 @@ export default {
width: 78px;
height: 78px;
border-radius: 2px;
background-color: #fafafa;
cursor: pointer;
}
@include element(item) {
Expand Down
Loading

0 comments on commit 0289d47

Please sign in to comment.