48 lines
1.2 KiB
Vue
Executable File
48 lines
1.2 KiB
Vue
Executable File
<template>
|
|
<div class="flex">
|
|
<button class="default">
|
|
<svg class="w-6 h-6">
|
|
<use v-show="!listsMusic.playing" xlink:href="#play"></use>
|
|
<use v-show="listsMusic.playing" xlink:href="#pause"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-1 text-sm text-gray-light">
|
|
{{ listsMusic.name }}
|
|
</div>
|
|
<div ref="favplayer" class="text-sm text-gray-light">
|
|
<span v-show="!listsMusic.playing">{{ listsMusic.time }}</span>
|
|
<span v-show="listsMusic.playing">{{ seek }}</span>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, watch } from 'vue'
|
|
import { useIntersectionObserver } from '@/includes/composables'
|
|
|
|
export default {
|
|
props: {
|
|
listsMusic: Object,
|
|
seek: String,
|
|
},
|
|
|
|
setup() {
|
|
const containerRef = ref(null)
|
|
const { isIntersecting } = useIntersectionObserver(
|
|
containerRef,
|
|
{},
|
|
showDetail
|
|
)
|
|
const showDetail = (entry) => {
|
|
//console.log(entry)
|
|
}
|
|
watch(isIntersecting, (isIntersecting) => {
|
|
//console.log(isIntersecting)
|
|
})
|
|
return {
|
|
favplayer: containerRef,
|
|
showDetail,
|
|
}
|
|
},
|
|
}
|
|
</script>
|