73 lines
1.6 KiB
Vue
73 lines
1.6 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="视频预览" :before-close="handleClose">
|
|
<video-player ref="playerRef" :src="url" width="100%" height="450px" />
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
url: {
|
|
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()
|
|
})
|
|
}
|
|
}
|
|
)
|
|
</script>
|