This commit is contained in:
parent
339696beef
commit
d515984964
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="pi-asset">
|
<div class="pi-asset">
|
||||||
<div class="file-item" v-for="(item, index) in value" :key="index" :style="style">
|
<div class="file-item" v-for="(item, index) in value" :key="index" :style="style">
|
||||||
<el-image v-if="obj.isImg(item)" :src="config.API_URL + '/' + item" :style="style" :preview-src-list="[config.API_URL + '/' + item]" fit="cover"
|
<el-image v-if="obj.isImg(item)" :src="item" :style="style" :preview-src-list="[item]" fit="cover"
|
||||||
preview-teleported :z-index="9999"></el-image>
|
preview-teleported :z-index="9999"></el-image>
|
||||||
<pi-player v-else-if="obj.isVideo(item)" :src="config.API_URL + '/' + item" :options="videoOptions"></pi-player>
|
<pi-player v-else-if="obj.isVideo(item)" :src="item" :options="videoOptions"></pi-player>
|
||||||
<el-icon v-else :style="style" style="color: #409eff;" :size="32">
|
<el-icon v-else :style="style" style="color: #409eff;" :size="32">
|
||||||
<component :is="'pi-icon-task'"/>
|
<component :is="'pi-icon-task'"/>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
|
|
@ -26,7 +26,6 @@ import pickerDialog from "./picker.vue";
|
||||||
import assetConfig from "@/config/asset"
|
import assetConfig from "@/config/asset"
|
||||||
import piPlayer from '@/components/piPlayer'
|
import piPlayer from '@/components/piPlayer'
|
||||||
import {nextTick, ref, watch} from "vue";
|
import {nextTick, ref, watch} from "vue";
|
||||||
import config from "@/config"
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<el-image :src="prefix+src" :preview-src-list="previewList" v-bind="attrs"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import config from "@/config"
|
||||||
|
import {computed, useAttrs} from "vue"
|
||||||
|
|
||||||
|
const attrs = useAttrs()
|
||||||
|
const props = defineProps({
|
||||||
|
src: {type: String, default: ""},
|
||||||
|
previewSrcList: {type: Array, default: []}
|
||||||
|
})
|
||||||
|
const prefix = config.API_URL + '/'
|
||||||
|
|
||||||
|
const previewList = computed(() => {
|
||||||
|
if (!props.previewSrcList?.length) return []
|
||||||
|
return props.previewSrcList.map(i => prefix + i)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -6,7 +6,9 @@
|
||||||
import Player from 'xgplayer'
|
import Player from 'xgplayer'
|
||||||
import HlsPlayer from 'xgplayer-hls'
|
import HlsPlayer from 'xgplayer-hls'
|
||||||
import {ref, watch, onMounted} from "vue";
|
import {ref, watch, onMounted} from "vue";
|
||||||
|
import config from "@/config"
|
||||||
|
|
||||||
|
const prefix = config.API_URL + '/'
|
||||||
const videoRef = ref(null)
|
const videoRef = ref(null)
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
src: {type: String, required: true, default: ""},
|
src: {type: String, required: true, default: ""},
|
||||||
|
|
@ -23,9 +25,9 @@ let player = ref(null)
|
||||||
|
|
||||||
watch(() => props.src, (val) => {
|
watch(() => props.src, (val) => {
|
||||||
if (player.value.hasStart) {
|
if (player.value.hasStart) {
|
||||||
player.value.src = val
|
player.value.src = prefix + val
|
||||||
} else {
|
} else {
|
||||||
player.value.start(val)
|
player.value.start(prefix + val)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -36,7 +38,7 @@ onMounted(() => {
|
||||||
function init() {
|
function init() {
|
||||||
player.value = new Player({
|
player.value = new Player({
|
||||||
el: videoRef.value,
|
el: videoRef.value,
|
||||||
url: props.src,
|
url: prefix + props.src,
|
||||||
autoplay: props.autoplay,
|
autoplay: props.autoplay,
|
||||||
loop: props.loop,
|
loop: props.loop,
|
||||||
controls: props.controls,
|
controls: props.controls,
|
||||||
|
|
@ -49,7 +51,7 @@ function init() {
|
||||||
function initHls() {
|
function initHls() {
|
||||||
player.value = new HlsPlayer({
|
player.value = new HlsPlayer({
|
||||||
el: videoRef.value,
|
el: videoRef.value,
|
||||||
url: props.src,
|
url: prefix + props.src,
|
||||||
autoplay: props.autoplay,
|
autoplay: props.autoplay,
|
||||||
loop: props.loop,
|
loop: props.loop,
|
||||||
controls: props.controls,
|
controls: props.controls,
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import piDialog from "@/components/piDialog"
|
||||||
import piTable from "@/components/piTable"
|
import piTable from "@/components/piTable"
|
||||||
import piUpload from "@/components/piUpload"
|
import piUpload from "@/components/piUpload"
|
||||||
import piSelect from "@/components/piSelect"
|
import piSelect from "@/components/piSelect"
|
||||||
|
import piImage from "@/components/piImage"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
install(app: App) {
|
install(app: App) {
|
||||||
|
|
@ -21,6 +22,7 @@ export default {
|
||||||
app.component('piTable', piTable)
|
app.component('piTable', piTable)
|
||||||
app.component('piUpload', piUpload)
|
app.component('piUpload', piUpload)
|
||||||
app.component('piSelect', piSelect)
|
app.component('piSelect', piSelect)
|
||||||
|
app.component('piImage', piImage)
|
||||||
|
|
||||||
//注册全局指令
|
//注册全局指令
|
||||||
app.directive('auth', auth)
|
app.directive('auth', auth)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue