92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
||
<div v-show="modelValue">
|
||
<div v-if="type == 'image'">
|
||
<el-image-viewer v-if="previewLists.length" :url-list="previewLists" hide-on-click-modal @close="handleClose" />
|
||
</div>
|
||
<div v-if="type == 'video'">
|
||
<el-dialog v-model="visible" width="740px" :title="$t('material.preview')" :before-close="handleClose">
|
||
<video-player ref="playerRef" :src="url" width="100%" height="450px" />
|
||
</el-dialog>
|
||
</div>
|
||
<div v-if="type == 'file'">
|
||
<el-drawer v-model="visible" size="100%">
|
||
<iframe :src="src" width="100%" height="100%" frameborder="0" class="h-screen" v-if="src"></iframe>
|
||
<span v-else>未配置预览服务器，请参考文档配置</span>
|
||
</el-drawer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { Base64 } from 'js-base64';
|
||
import { validateNull } from '/@/utils/validate';
|
||
|
||
const VideoPlayer = defineAsyncComponent(() => import('/@/components/VideoPlayer/index.vue'));
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
url: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
fileName: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'image',
|
||
},
|
||
});
|
||
const emit = defineEmits<{
|
||
(event: 'update:modelValue', value: boolean): void;
|
||
}>();
|
||
|
||
const playerRef = shallowRef();
|
||
|
||
const visible = computed({
|
||
get() {
|
||
return props.modelValue;
|
||
},
|
||
|
||
set(value) {
|
||
emit('update:modelValue', value);
|
||
},
|
||
});
|
||
|
||
const handleClose = () => {
|
||
emit('update:modelValue', false);
|
||
};
|
||
|
||
const previewLists = ref<any[]>([]);
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
(value) => {
|
||
if (value) {
|
||
nextTick(() => {
|
||
previewLists.value = [props.url];
|
||
playerRef.value?.play();
|
||
});
|
||
} else {
|
||
nextTick(() => {
|
||
previewLists.value = [];
|
||
playerRef.value?.pause();
|
||
});
|
||
}
|
||
}
|
||
);
|
||
|
||
const kkServerURL = import.meta.env.VITE_KK_SERVER_URL;
|
||
const localURL = import.meta.env.VITE_KK_LOCAL_URL;
|
||
const src = computed(() => {
|
||
if (validateNull(kkServerURL)) {
|
||
return undefined;
|
||
}
|
||
return `${kkServerURL}?url=` + encodeURIComponent(Base64.encode(`${localURL}${props.url}&fullfilename=${props.fileName}`));
|
||
});
|
||
</script>
|