mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
tnt group
72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<!-- eslint-disable vue/multi-word-component-names -->
|
||
<template>
|
||
<!-- 重要：需要设置 crossOrigin="anonymous"，否则保存画板缩略图会失败 -->
|
||
<video
|
||
ref="vVideoRef"
|
||
class="go-video"
|
||
preload="auto"
|
||
crossOrigin="anonymous"
|
||
playsinline
|
||
:loop="option.loop"
|
||
:autoplay="option.autoplay"
|
||
:muted="option.muted"
|
||
:width="w"
|
||
:height="h"
|
||
:src="option.dataset"
|
||
></video>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
|
||
import { useChartDataFetch } from '@/hooks'
|
||
import { CreateComponentType } from '@/packages/index.d'
|
||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||
import { option as configOption } from './config'
|
||
|
||
const props = defineProps({
|
||
chartConfig: {
|
||
type: Object as PropType<CreateComponentType>,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
const { w, h } = toRefs(props.chartConfig.attr)
|
||
let option = shallowReactive({ ...configOption })
|
||
|
||
// 预览更新
|
||
const vVideoRef = ref(null)
|
||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||
option = newData
|
||
})
|
||
|
||
// 编辑更新
|
||
watch(
|
||
() => props.chartConfig.option,
|
||
(newData: any) => {
|
||
option = newData
|
||
if (!vVideoRef.value) return
|
||
const video: any = vVideoRef.value
|
||
video.loop = option.loop
|
||
video.autoplay = option.autoplay
|
||
video.muted = option.muted
|
||
|
||
// 控制是否播放还是停止在第一帧
|
||
!option.autoplay && (video.pause(), (video.currentTime = 0))
|
||
option.autoplay && video.play()
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@include go('video') {
|
||
display: block;
|
||
mix-blend-mode: screen;
|
||
object-fit: v-bind('option.fit');
|
||
border-radius: v-bind('option.borderRadius');
|
||
}
|
||
</style>
|