javascript 全局组件上的播放音乐按钮适用于子组件

von4xj4u  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(116)

我想知道一些事情。
我有一个全局组件,它是一个music-player.vue,代码如下:

<button class="btn bg-[#a47551] hover:text-gray-50 p-3 shadow-xl"  @click="togglePlayback">
       <span class="material-symbols-outlined">
          {{ isPlaying ? "pause" : "play_arrow" }}
        </span>
    </button>

<script>
import { onMounted, ref } from "vue";

export default {
    setup() {
        const audio = new Audio();
        const isPlaying = ref(false);
        
        function togglePlayback() {
            if (isPlaying.value) {
                pausePlayback();
            } else {
                playPlayback();
            }
        }

        function playPlayback() {
            if (!isPlaying.value) {
                audio.play();
                isPlaying.value = true;
            }
        }

        function pausePlayback() {
            if (isPlaying.value) {
                audio.pause();
                isPlaying.value = false;
            }
        }

        function handlePlaybackStart() {
            isPlaying.value = true;
        }

        function handlePlaybackPause() {
            isPlaying.value = false;
        }

        onMounted(() => {
            audio.src = "./../../../assets/song/1.mp3";
            audio.loop = true;
            audio.addEventListener("play", handlePlaybackStart);
            audio.addEventListener("pause", handlePlaybackPause);
        });

        return {
            togglePlayback,
            isPlaying,
        };
    },
};
</script>

我的问题是:我还想在单击Home.vue上的lihatUndangan按钮时触发togglePlayback()按钮。下面是我的代码:

<button class="btn bg-[#a47551] text-gray-50" @click="lihatUndangan">Lihat undangan</button>

<script>
import { ref } from 'vue';
import { useRouter } from "vue-router";

export default {
  data() {
    return {
      namaTamu: '',
    };
  },
  mounted() {
    const isPlaying = ref(false);
    const audio = new Audio();
    const namaTamu = localStorage.getItem('namaTamu');

    if (!namaTamu) {
      const namaInput = window.prompt('Masukkan nama:');
      
      if (namaInput && namaInput.trim() !== '') {
        localStorage.setItem('namaTamu', namaInput);
        this.namaTamu = namaInput;
      } else {
        this.namaTamu = 'Tamu Undangan';
      }
    } else {
      this.namaTamu = namaTamu;
    }

    setTimeout(() => {
      this.isLoading = false;
    }, 500);
  },
  setup() {
    const router = useRouter();

    function lihatUndangan() {
      router.push('/welcome');
    }

    return {
      lihatUndangan
    };
  }
};
</script>

有人能给予我一个建议或建议吗?我是新来的,谢谢你:)

uttx8gqw

uttx8gqw1#

如果你想从另一个组件控制一个组件的逻辑,你可以传递一个pub/sub对象给props。在Home.vue中调用pubsub.exec(),在music-player.vue中调用pubsub.subscribe(()=>...或者使用常规的Vue提供/注入方法(https://vuejs.org/guide/components/provide-inject.html

相关问题