Skip to content

C
cy-admin-ui
Commit 455852d4 authored by 廖伟胜's avatar 廖伟胜
Browse files
Options

添加上传组件属性和修改配置

parent 0f9fe073
Show whitespace changes
Inline Side-by-side
Showing with 275 additions and 42 deletions
packages/form/upload/src/upload-audio.vue
View file @ 455852d4
<template>
<div>
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :file-list="data" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<!--音频-->
<div v-if="data.length >0" style="display:inline">
<div v-for="(item,index) in data" :key="index" style="float:left;" @click.stop="handler().getIndex(index)" >
<div class="avatar" >
<div v-if="data.length >0 && !isList" style="display:inline">
<div v-for="(item,index) in data" :key="index" style="float:left;margin-right:10px;" @click.stop="handler().getIndex(index)" >
<div class="avatar" style="border:none" >
<i class="el-icon-close delete-icon" title="删除" @click.stop="data.splice(index, 1)"/>
<aplayer class="audio-player" :music="item"></aplayer>
<aplayer
class="audio-player"
:music="item"
:mini="mini"
:float="float"
:showLrc="showLrc"
:mutex="mutex"
:theme="themeColor"
:shuffle="shuffle"
:repeat="repeat"
:listMaxHeight="listMaxHeight"
:listFolded="listFolded"
></aplayer>
</div>
</div>
</div>
<div v-else-if="data.length >0 && isList" style="display:inline">
<div class="avatar" style="border:none" >
<i class="el-icon-close delete-icon" title="删除" @click.stop="data.splice(index, 1)"/>
<aplayer
class="audio-player"
:list="data"
:mini="mini"
:float="float"
:showLrc="showLrc"
:mutex="mutex"
:theme="themeColor"
:shuffle="shuffle"
:repeat="repeat"
:listMaxHeight="listMaxHeight"
:listFolded="listFolded"
></aplayer>
</div>
</div>
<!--图片和视频-->
<i :style="style" class="avatar el-icon-plus avatar-uploader-icon">
<span class="upload-label">{{ label }}</span>
</i>
<!--文件类型提示-->
<div slot="tip" class="el-upload__tip" style="margin-top:15px">只能上传{{handler().listByString(fileType)}}文件，且不超过500kb</div>
<div slot="tip" class="el-upload__tip" style="margin-top:15px">只能上传{{handler().listByString(fileType)}}文件，且不超过10Mb</div>
</el-upload>
<span class="upload-tips">{{ tips}}</span>
</div>
......@@ -42,9 +71,59 @@ export default{
},
//上传值
value: {
type: [String, Object, Array],
type: [Object, Array],
default: '',
},
//播放列表，如果data不是空数组，播放列表就会显示出来，即使list中只有一首歌并且他和music一样
isList:{
type:Boolean,
default:false,
},
//迷你模式
mini:{
type:Boolean,
default:false,
},
//浮动模式。你可以在页面上随意拖放你的播放器
float:{
type:Boolean,
default:false,
},
//是否显示歌词
showLrc:{
type:Boolean,
default:false,
},
//是否在该播放器播放时暂停其他播放器
mutex:{
type:Boolean,
default:true,
},
//主题色。如果当前歌曲也设置了theme则以歌曲的为准
themeColor:{
type:String,
default:'#41b883',
},
//随机播放
shuffle:{
type:Boolean,
default:false,
},
//轮播模式。值可以是'repeat-one'(单曲循环) 'repeat-all' (列表循环) 或者 'no-repeat'(不循环)。为了好记，还可以使用对应的 'music','list','none'
repeat:{
type:String,
default:'no-repeat',
},
//播放列表面板最大高度
listMaxHeight:{
type:String,
default:'none',
},
//默认收起播放列表
listFolded:{
type:Boolean,
default:false,
},
// 是否多选
multiple: {
type: Boolean,
......@@ -95,7 +174,7 @@ export default{
// 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
fileType: {
type: Array,
default: () =>['png', 'jpg', 'jpeg'] ,
default: () =>['mp3','ogg','aac','wav', 'aiff', 'pcm', 'flac', 'alac','wma'] ,
},
source: { // 上传服务器
type: String,
......@@ -298,22 +377,11 @@ export default{
imageSuccess: (data,file) => {
const link = data.url;
// this.data = url
let attr = {
url:link,
}
let attrs = {
name:file.name,
url:link
title:file.name,
src:link
}
if(this.uploadType === 'video'){
this.isShowUploadVideo = true;
this.videoFlag = false;
this.videoUploadPercent = 0;
}else if(this.uploadType == 'file'){
this.data = this.data.push(attrs);
return;
}
this.data = this.index != null ? this.data.splice(this.index,1,attr) : this.data.push(attr);
this.$refs.upload.clearFiles();
},
//获取索引
......@@ -410,11 +478,16 @@ export default{
.avatar{
width: 100%;
height: 100%;
margin-right:5px;
border: 1px solid rgb(241, 241, 241);
box-sizing: border-box;
&.avatar-uploader-icon{
}
.audio-player{
width: 100%;
height: 100%;
top:-15px;
right:5px;
}
.delete-icon{
position: relative;
top: 0;
......
packages/form/upload/src/upload-file.vue
View file @ 455852d4
<template>
<div>
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :file-list="data" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<i class="el-icon-upload" v-if="uploadStyle === 'drag'"></i>
<div class="el-upload__text" v-if="uploadStyle === 'drag'">将文件拖到此处，或<em>点击上传</em></div>
<!--文件上传-->
......@@ -38,7 +38,7 @@ export default{
},
//上传值
value: {
type: [String, Object, Array],
type: [ Object, Array],
default: '',
},
// 是否多选
......@@ -86,7 +86,7 @@ export default{
// 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
fileType: {
type: Array,
default: () =>['png', 'jpg', 'jpeg'] ,
default: () =>["doc", "xls", "ppt", "txt", "pdf"] ,
},
source: { // 上传服务器
type: String,
......
packages/form/upload/src/upload-img-list.vue
View file @ 455852d4
......@@ -48,6 +48,10 @@ export default{
type: [String, Object, Array],
default: null,
},
showDel: {
type: Boolean,
default: true,
},
edit: { // 是否可编辑
type: Boolean,
default: true,
......
packages/form/upload/src/upload-video.vue
View file @ 455852d4
......@@ -2,14 +2,19 @@
<div>
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :on-progress="(event, file, fileList)=>handler().uploadVideoProcess(event, file, fileList)" :file-list="data" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<!--视频-->
<div v-if="data.length >0" style="display:inline" @click="handler().getIndex(index)" >
<div v-for="(item,index) in data" :key="index" style="float:left;">
<div :style="style" class="avatar" >
<div v-if="data.length >0" style="display:inline" @click.stop="handler().getIndex(index)" >
<div v-for="(item,index) in data" :key="index" style="float:left;" @click.stop="handler().getIndex(index)">
<div :style="style" class="avatar video-box" >
<i class="el-icon-close delete-icon" title="删除" @click.stop="data.splice(index, 1)"/>
<video id="myVideo"
:src="item.url"
class="avatar video-avatar video_text"
controls="controls">
:autoplay="autoplay == true ? 'autoplay' : false"
:loop="loop == true ? 'loop' : false"
:controls="controls == true ? 'controls' : false"
:muted="muted == true ? 'muted' : false"
:poster="poster == true ? 'poster' : false"
:preload="preload == true ? 'preload' : false"
>
您的浏览器不支持视频播放
</video>
</div>
......@@ -24,7 +29,7 @@
<span class="upload-label">{{ label }}</span>
</i>
<!--文件类型提示-->
<div slot="tip" class="el-upload__tip" style="margin-top:15px">只能上传{{handler().listByString(fileType)}}文件，且不超过500kb</div>
<div slot="tip" class="el-upload__tip" style="margin-top:15px">只能上传{{handler().listByString(fileType)}}文件，且不超过50Mb</div>
</el-upload>
<!-- <p class="upload_pictures" style="z-index:1000;font-size:15px" >
......@@ -52,6 +57,36 @@ export default{
type: [String, Object, Array],
default: '',
},
//如果出现该属性，则视频在就绪后马上播放。
autoplay:{
type: Boolean,
default: false,
},
//如果出现该属性，则当媒介文件完成播放后再次开始播放。
loop:{
type: Boolean,
default: false,
},
//如果出现该属性，则向用户显示控件，比如播放按钮。
controls:{
type: Boolean,
default: true,
},
//规定视频的音频输出应该被静音。
muted:{
type: Boolean,
default: false,
},
//规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
poster:{
type: Boolean,
default: false,
},
//如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
preload:{
type: Boolean,
default: false,
},
// 是否多选
multiple: {
type: Boolean,
......@@ -102,7 +137,7 @@ export default{
// 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
fileType: {
type: Array,
default: () =>['png', 'jpg', 'jpeg'] ,
default: () =>['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'] ,
},
source: { // 上传服务器
type: String,
......@@ -422,6 +457,20 @@ export default{
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}
.video-box {
padding-bottom: 50px;
width: 100%;
position: relative;
}
.video-box video {
width: 100%;
height: 100%;
margin-top:-43px;
position: absolute;
top: 0;
left: 0;
}
.avatar-uploader{
display: block;
margin-bottom: 2px;
......
packages/form/upload/src/upload.vue
View file @ 455852d4
......@@ -20,7 +20,6 @@
v-model="value"
:edit="edit"
:dialog="dialog"
:data-type="dataType"
:tips="tips"
:source="source"
:size="size"
......@@ -36,6 +35,12 @@
:tips="tips"
:source="source"
:size="size"
:autoplay="autoplay"
:loop="loop"
:controls="controls"
:muted="muted"
:poster="poster"
:preload="preload"
/>
<UploadAudio v-if="type === 'audio'"
:label="label"
......@@ -44,10 +49,19 @@
:showDel="showDel"
v-model="value"
:dialog="dialog"
:data-type="dataType"
:tips="tips"
:source="source"
:size="size"
:isList="isList"
:mini="mini"
:float="float"
:showLrc="showLrc"
:mutex="mutex"
:themeColor="themeColor"
:shuffle="shuffle"
:repeat="repeat"
:listMaxHeight="listMaxHeight"
:listFolded="listFolded"
/>
</div>
</template>
......@@ -120,6 +134,86 @@ export default {
type: Number,
default: 100,
},
//播放列表，如果data不是空数组，播放列表就会显示出来，即使list中只有一首歌并且他和music一样
isList:{
type:Boolean,
default:false,
},
//迷你模式
mini:{
type:Boolean,
default:false,
},
//浮动模式。你可以在页面上随意拖放你的播放器
float:{
type:Boolean,
default:false,
},
//是否显示歌词
showLrc:{
type:Boolean,
default:false,
},
//是否在该播放器播放时暂停其他播放器
mutex:{
type:Boolean,
default:true,
},
//主题色。如果当前歌曲也设置了theme则以歌曲的为准
themeColor:{
type:String,
default:'#41b883',
},
//随机播放
shuffle:{
type:Boolean,
default:false,
},
//轮播模式。值可以是'repeat-one'(单曲循环) 'repeat-all' (列表循环) 或者 'no-repeat'(不循环)。为了好记，还可以使用对应的 'music','list','none'
repeat:{
type:String,
default:'no-repeat',
},
//播放列表面板最大高度
listMaxHeight:{
type:String,
default:'none',
},
//默认收起播放列表
listFolded:{
type:Boolean,
default:false,
},
//如果出现该属性，则视频在就绪后马上播放。
autoplay:{
type: Boolean,
default: false,
},
//如果出现该属性，则当媒介文件完成播放后再次开始播放。
loop:{
type: Boolean,
default: false,
},
//如果出现该属性，则向用户显示控件，比如播放按钮。
controls:{
type: Boolean,
default: true,
},
//规定视频的音频输出应该被静音。
muted:{
type: Boolean,
default: false,
},
//规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
poster:{
type: Boolean,
default: false,
},
//如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
preload:{
type: Boolean,
default: false,
},
},
}
</script>
packages/layout/src/layout-form.vue
View file @ 455852d4
......@@ -59,6 +59,22 @@
:tips="(item.upload && item.upload.tips) || ''"
:source="(item.upload && item.upload.source) || ''"
:fileType="(item.upload && item.upload.fileType)"
:autoplay="(item.upload && item.upload.autoplay) || false"
:loop="(item.upload && item.upload.loop) || false"
:controls="(item.upload && item.upload.controls) || true"
:muted="(item.upload && item.upload.muted) || false"
:poster="(item.upload && item.upload.poster) || false"
:preload="(item.upload && item.upload.preload) || false"
:isList="(item.upload && item.upload.isList) || false"
:mini="(item.upload && item.upload.mini) || false"
:float="(item.upload && item.upload.float) || false"
:showLrc="(item.upload && item.upload.showLrc) || false"
:mutex="(item.upload && item.upload.mutex) || false"
:themeColor="(item.upload && item.upload.themeColor)"
:shuffle="(item.upload && item.upload.shuffle) || false"
:repeat="(item.upload && item.upload.repeat)"
:listMaxHeight="(item.upload && item.upload.listMaxHeight)"
:listFolded="(item.upload && item.upload.listFolded) || false"
/>
<!-- <cy-upload
:ref="form[item.field]"
......@@ -136,9 +152,6 @@ export default {
},
loading: false, // 控制表格的加载状态
saveLoading: false, // 保存状态
video:[{url:"https://vd4.bdstatic.com/mda-kb5mi75zvcx94wir/v1-cae/sc/mda-kb5mi75zvcx94wir.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1644909031-0-0-fc3f17824543985f4541f98638fb95a9&bcevod_channel=searchbox_feed&pd=1&pt=3&logid=2431577623&vid=4581260007125923518&abtest=&klogid=2431577623"},{url:"https://vd4.bdstatic.com/mda-kb5mi75zvcx94wir/v1-cae/sc/mda-kb5mi75zvcx94wir.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1644909031-0-0-fc3f17824543985f4541f98638fb95a9&bcevod_channel=searchbox_feed&pd=1&pt=3&logid=2431577623&vid=4581260007125923518&abtest=&klogid=2431577623"}],
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
list: [{url: 'https://lmg.jj20.com/up/allimg/4k/s/01/210924112Q25J9-0-lp.jpg'},{ url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
}
},
computed: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment