<template>
  <div class="notice-bar-container">
    <div class="notice-bar" v-if="showNotice">
      <div class="notice-content-wrapper">
        <div class="notice-content" ref="noticeContent">
          <span v-if="isScrolling">{{ noticeText }}</span>
        </div>
      </div>
      <button class="close-btn" @click="closeNotice">×</button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onBeforeMount } from 'vue';
import { onMounted as onWindowMounted } from '@vue/runtime-core';
// 控制公告欄是否顯示的響應(yīng)式變量
const showNotice = ref(true);
// 公告內(nèi)容
const noticeText = ref('這里是公告內(nèi)容示例，可替換哦');
const noticeContent = ref(null);
// 用于存儲(chǔ)頁(yè)面寬度
const pageWidth = ref(window.innerWidth);
// 用來(lái)存儲(chǔ)滾動(dòng)定時(shí)器
const scrollInterval = ref(null);
// 控制公告內(nèi)容是否開始滾動(dòng)展示的變量
const isScrolling = ref(false);
// 關(guān)閉公告的方法
const closeNotice = () => {
  showNotice.value = false;
  if (scrollInterval.value) {
    clearInterval(scrollInterval.value);
  }
};
// 在組件掛載前獲取頁(yè)面寬度（首次）
onBeforeMount(() => {
  pageWidth.value = window.innerWidth;
});
// 當(dāng)窗口大小變化時(shí)，更新頁(yè)面寬度
onWindowMounted(() => {
  window.addEventListener('resize', () => {
    pageWidth.value = window.innerWidth;
  });
});
onMounted(() => {
  nextTick(() => {
    // 獲取滾動(dòng)內(nèi)容的寬度
    const contentWidth = noticeContent.value.offsetWidth;
    // 設(shè)置外層容器寬度為頁(yè)面寬度的50%，并開啟滾動(dòng)
    noticeContent.value.parentNode.parentNode.style.width = `${pageWidth.value * 0.5}px`;
    noticeContent.value.parentNode.parentNode.style.marginLeft = 'auto';
    noticeContent.value.parentNode.parentNode.style.marginRight = 'auto';
    noticeContent.value.parentNode.parentNode.style.overflow = 'hidden';
    // 克隆一份內(nèi)容用于滾動(dòng)銜接
    const cloneNode = noticeContent.value.cloneNode(true);
    noticeContent.value.parentNode.appendChild(cloneNode);
    // 滾動(dòng)動(dòng)畫邏輯
    let scrollDistance = pageWidth.value * 0.5;
    const scrollSpeed = 2; // 調(diào)整滾動(dòng)速度，可按需修改
    scrollInterval.value = setInterval(() => {
      scrollDistance -= scrollSpeed;
      if (scrollDistance < -contentWidth) {
        scrollDistance = pageWidth.value * 0.5;
      }
      noticeContent.value.style.transform = `translateX(${scrollDistance}px)`;
      // 隱藏頁(yè)面展示的文字，只展示滾動(dòng)的文字
      noticeContent.value.parentNode.style.overflow = 'hidden';
      // 清除公告內(nèi)容區(qū)域可能存在的文本節(jié)點(diǎn)（除了綁定的 noticeText 內(nèi)容）
      const childNodes = noticeContent.value.childNodes;
      for (let i = 0; i < childNodes.length; i++) {
        if (childNodes[i].nodeType === 3 && childNodes[i].textContent.trim()!== noticeText.value.trim()) {
          noticeContent.value.removeChild(childNodes[i]);
        }
      }
      // 開始滾動(dòng)時(shí)設(shè)置 isScrolling 為 true，展示公告內(nèi)容
      isScrolling.value = true;
    }, 30);
  });
});
</script>
<style scoped>
.notice-bar-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.notice-bar {
  position: fixed;
  top: 0;
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}
.notice-content-wrapper {
  flex: 1;
  overflow: hidden;
}
.notice-content {
  white-space: nowrap;
  display: inline-block;
}
.close-btn {
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
}
</style>

<template>
  <div v-if="visible" class="announcement-container">
    <div class="announcement-content" :style="{ width: contentWidth + 'px' }">
      <span>{{ message }}</span>
    </div>
    <button class="close-btn" @click="closeAnnouncement">x</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const visible = ref(true); // 公告是否顯示
const message = ref("這是一條滾動(dòng)公告，您可以設(shè)置任何內(nèi)容顯示在這里。");
const contentWidth = ref(0); // 動(dòng)態(tài)計(jì)算公告內(nèi)容的寬度
// 頁(yè)面加載時(shí)計(jì)算公告的寬度
onMounted(() => {
  contentWidth.value = window.innerWidth / 2; // 公告寬度為頁(yè)面寬度的50%
});
// 關(guān)閉公告的邏輯
const closeAnnouncement = () => {
  visible.value = false;
};
</script>
<style scoped>
.announcement-container {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  background-color: #ff9800;
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  font-size: 16px;
  border-radius: 5px;
  overflow: hidden;
}
.announcement-content {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  margin-left: 10px;
}
</style>

import { createApp } from 'vue';
import App from './App.vue';
import Notice from './components/Notice.vue';
const app = createApp(App);
// 注冊(cè)全局公告組件
app.component('Notice', Notice);
app.mount('#app');

<template>
  <div id="app">
    <Notice />
    <router-view></router-view>
  </div>
</template>