|
|
@ -1,10 +1,15 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="preview"> |
|
|
<div class="preview"> |
|
|
<div class="file" v-for="(item, index) in fileList" :key="index" size="18"> |
|
|
<div class="file" v-for="(item, index) in fileList" :key="index" size="18" > |
|
|
|
|
|
<Icon icon="fa:file-word-o" class="cursor-pointer mr-6px color-#409eff" v-if="isWord(item)"/> |
|
|
|
|
|
<Icon icon="fa:file-image-o" class="cursor-pointer mr-6px color-#409eff" v-if="isImg(item)"/> |
|
|
|
|
|
<Icon icon="ep:video-camera" class="cursor-pointer mr-6px color-#409eff" v-if="isVideo(item)"/> |
|
|
<div class="name" @click="preview(item)">{{ item.name }}</div> |
|
|
<div class="name" @click="preview(item)">{{ item.name }}</div> |
|
|
<Icon icon="ep:delete" class="cursor-pointer" /> |
|
|
<Icon icon="ep:close" class="cursor-pointer" @click="deleteFile(item, index)" /> |
|
|
|
|
|
|
|
|
|
|
|
<VueVideoPlayer /> |
|
|
</div> |
|
|
</div> |
|
|
<el-dialog v-model="dialogTableVisible" title="" width="80%"> |
|
|
<el-dialog v-model="dialogTableVisible" title="" min-width="80%"> |
|
|
<div class="dialog"> |
|
|
<div class="dialog"> |
|
|
<Icon |
|
|
<Icon |
|
|
icon="ep:close" |
|
|
icon="ep:close" |
|
|
@ -14,7 +19,13 @@ |
|
|
@click="dialogTableVisible = false" |
|
|
@click="dialogTableVisible = false" |
|
|
/> |
|
|
/> |
|
|
<img :src="chooseItem.url" alt="" v-if="isImg(chooseItem)" /> |
|
|
<img :src="chooseItem.url" alt="" v-if="isImg(chooseItem)" /> |
|
|
<!-- <video-player :options="playerOptions"/> --> |
|
|
<video controls muted loop width="80%" v-if="isVideo(chooseItem)"> |
|
|
|
|
|
<source :src="chooseItem.url" /> |
|
|
|
|
|
</video> |
|
|
|
|
|
<!-- <iframe frameborder="0" |
|
|
|
|
|
:src="'https://view.officeapps.live.com/op/view.aspx?src=' +chooseItem.url" width='100%' height="600" v-if="isWord(chooseItem)"> |
|
|
|
|
|
</iframe>] --> |
|
|
|
|
|
<!-- <div ref="word" class="childRef" v-if="isWord(chooseItem)"></div> --> |
|
|
</div> |
|
|
</div> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
</div> |
|
|
</div> |
|
|
@ -23,59 +34,74 @@ |
|
|
import { |
|
|
import { |
|
|
FILE_IMG_MAP, |
|
|
FILE_IMG_MAP, |
|
|
FILE_TYPE_LIST, |
|
|
FILE_TYPE_LIST, |
|
|
|
|
|
FILE_WORD_TYPE_LIST, |
|
|
IMG_TYPE_LIST, |
|
|
IMG_TYPE_LIST, |
|
|
VIDEO_TYPE_LIST, |
|
|
VIDEO_TYPE_LIST, |
|
|
MUSIC_TYPE_LIST |
|
|
MUSIC_TYPE_LIST |
|
|
} from '@/utils/globalConst.js' |
|
|
} from '@/utils/globalConst.js' |
|
|
|
|
|
// import axios from 'axios' |
|
|
|
|
|
// import { renderAsync } from 'docx-preview' |
|
|
|
|
|
// import request from '@/config/axios' |
|
|
|
|
|
// import JSZip from 'jszip' |
|
|
|
|
|
// let docx = import.meta.glob('docx-preview'); |
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
fileList: { |
|
|
fileList: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
required: true |
|
|
required: true |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
console.log(props.fileList) |
|
|
|
|
|
const dialogTableVisible = ref(false) |
|
|
const dialogTableVisible = ref(false) |
|
|
const chooseItem = ref() |
|
|
const chooseItem = ref() |
|
|
const preview = (item) => { |
|
|
let word = ref(null) |
|
|
|
|
|
const preview = async (item) => { |
|
|
|
|
|
if (isImg(item) || isVideo(item)) { |
|
|
chooseItem.value = item |
|
|
chooseItem.value = item |
|
|
console.log(chooseItem.value) |
|
|
|
|
|
dialogTableVisible.value = true |
|
|
dialogTableVisible.value = true |
|
|
|
|
|
} else { |
|
|
|
|
|
window.open(item.url) |
|
|
|
|
|
} |
|
|
|
|
|
// request.get({ |
|
|
|
|
|
// url: chooseItem.value.url, |
|
|
|
|
|
// responseType: 'blob', |
|
|
|
|
|
// needLoading: true, |
|
|
|
|
|
// }).then((res) => { |
|
|
|
|
|
// nextTick(() => { |
|
|
|
|
|
// renderAsync(res, word.value) |
|
|
|
|
|
// }) |
|
|
|
|
|
// }) |
|
|
} |
|
|
} |
|
|
const isImg = (item) => { |
|
|
const isImg = (item) => { |
|
|
|
|
|
// console.log('item',item) |
|
|
const lastDotIndex = item.name.lastIndexOf('.') |
|
|
const lastDotIndex = item.name.lastIndexOf('.') |
|
|
const result = item.name.substring(lastDotIndex + 1) |
|
|
const result = item.name.substring(lastDotIndex + 1) |
|
|
|
|
|
console.log(11) |
|
|
|
|
|
console.log(result) |
|
|
|
|
|
console.log(IMG_TYPE_LIST) |
|
|
|
|
|
console.log(22) |
|
|
return IMG_TYPE_LIST.includes(result) |
|
|
return IMG_TYPE_LIST.includes(result) |
|
|
} |
|
|
} |
|
|
const isVideo = (item) => { |
|
|
const isVideo = (item) => { |
|
|
return VIDEO_TYPE_LIST.includes(item.name) |
|
|
const lastDotIndex = item.name.lastIndexOf('.') |
|
|
|
|
|
const result = item.name.substring(lastDotIndex + 1) |
|
|
|
|
|
return VIDEO_TYPE_LIST.includes(result) |
|
|
} |
|
|
} |
|
|
const playerOptions = ref({ |
|
|
const isWord = (item) => { |
|
|
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度 |
|
|
const lastDotIndex = item.name.lastIndexOf('.') |
|
|
autoplay: false, // 如果为true,浏览器准备好时开始回放。 |
|
|
const result = item.name.substring(lastDotIndex + 1) |
|
|
muted: false, // 默认情况下将会消除任何音频。 |
|
|
return FILE_WORD_TYPE_LIST.includes(result) |
|
|
loop: false, // 是否视频一结束就重新开始。 |
|
|
} |
|
|
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） |
|
|
const deleteFile = (item, index) => { |
|
|
language: 'zh-CN', |
|
|
emit('deleteFile', item, index) |
|
|
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） |
|
|
} |
|
|
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 |
|
|
// 传递给父类 |
|
|
sources: [{ |
|
|
const emit = defineEmits(['deleteFile']) |
|
|
// type: 'video/mp4', // 类型 |
|
|
|
|
|
src: 'https://tx.dogevideo.com/vcloud/17/v/20190424/1556036075_818c4125ec9c8cbc7a7a8a7cc1601512/1037/7d515b22c4958598c0fbd1e6290a5ca5.mp4?vkey=FFA4A7&tkey=16492405502eb7beec64&auth_key=1649254950-Ubt0D7z0CUeXs871-0-432e03b97493872cf0bf1f8a37d812db' // url地址 |
|
|
|
|
|
}], |
|
|
|
|
|
poster: '', // 封面地址 |
|
|
|
|
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 |
|
|
|
|
|
controlBar: { |
|
|
|
|
|
timeDivider: true, // 当前时间和持续时间的分隔符 |
|
|
|
|
|
durationDisplay: true, // 显示持续时间 |
|
|
|
|
|
remainingTimeDisplay: false, // 是否显示剩余时间功能 |
|
|
|
|
|
fullscreenToggle: true // 是否显示全屏按钮 |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.file { |
|
|
.file { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
cursor: pointer; |
|
|
.name { |
|
|
.name { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
@ -83,6 +109,11 @@ const playerOptions = ref({ |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
width: 140px; |
|
|
width: 140px; |
|
|
} |
|
|
} |
|
|
|
|
|
&:hover{ |
|
|
|
|
|
.name { |
|
|
|
|
|
color: #409eff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
img { |
|
|
img { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
@ -95,6 +126,9 @@ img { |
|
|
} |
|
|
} |
|
|
.dialog { |
|
|
.dialog { |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
.close { |
|
|
.close { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
|
