烟台网站建设策划,99作文网,百度公司招聘2022年最新招聘,直播开放平台登录文章目录 需求分析1. 创建公告组件Notice.vue2. 注册全局组件3. 使用 需求
系统中需要有一个公告展示#xff0c;且这个公告位于页面上方#xff0c;每个页面都要看到 分析
1. 创建公告组件Notice.vue
第一种 在你的项目的合适组件目录下#xff08;比如components目录且这个公告位于页面上方每个页面都要看到 分析
1. 创建公告组件Notice.vue
第一种 在你的项目的合适组件目录下比如components目录创建Notice.vue文件内容如下
templatediv classnotice-bar-containerdiv classnotice-bar v-ifshowNoticediv classnotice-content-wrapperdiv classnotice-content refnoticeContentspan v-ifisScrolling{{ noticeText }}/span/div/divbutton classclose-btn clickcloseNotice×/button/div/div
/templatescript setup
import { ref, onMounted, nextTick, onBeforeMount } from vue;
import { onMounted as onWindowMounted } from vue/runtime-core;// 控制公告栏是否显示的响应式变量
const showNotice ref(true);
// 公告内容
const noticeText ref(这里是公告内容示例可替换哦);
const noticeContent ref(null);
// 用于存储页面宽度
const pageWidth ref(window.innerWidth);
// 用来存储滚动定时器
const scrollInterval ref(null);
// 控制公告内容是否开始滚动展示的变量
const isScrolling ref(false);// 关闭公告的方法
const closeNotice () {showNotice.value false;if (scrollInterval.value) {clearInterval(scrollInterval.value);}
};// 在组件挂载前获取页面宽度首次
onBeforeMount(() {pageWidth.value window.innerWidth;
});// 当窗口大小变化时更新页面宽度
onWindowMounted(() {window.addEventListener(resize, () {pageWidth.value window.innerWidth;});
});onMounted(() {nextTick(() {// 获取滚动内容的宽度const contentWidth noticeContent.value.offsetWidth;// 设置外层容器宽度为页面宽度的50%并开启滚动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;// 克隆一份内容用于滚动衔接const cloneNode noticeContent.value.cloneNode(true);noticeContent.value.parentNode.appendChild(cloneNode);// 滚动动画逻辑let scrollDistance pageWidth.value * 0.5;const scrollSpeed 2; // 调整滚动速度可按需修改scrollInterval.value setInterval(() {scrollDistance - scrollSpeed;if (scrollDistance -contentWidth) {scrollDistance pageWidth.value * 0.5;}noticeContent.value.style.transform translateX(${scrollDistance}px);// 隐藏页面展示的文字只展示滚动的文字noticeContent.value.parentNode.style.overflow hidden;// 清除公告内容区域可能存在的文本节点除了绑定的 noticeText 内容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]);}}// 开始滚动时设置 isScrolling 为 true展示公告内容isScrolling.value true;}, 30);});
});
/scriptstyle 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亮点 通过showNotice这个ref来控制公告栏是否显示初始化为true表示默认显示。 noticeText用来存放公告的具体文本内容这里提供了一个示例文本实际使用时可以替换成真实的公告内容来源比如从接口获取等。closeNotice方法用于点击关闭按钮时隐藏公告栏即将showNotice设置为false。 样式部分设置公告栏为固定定位在页面顶部设置了合适的背景色、文字颜色、内边距等并且让关闭按钮靠右对齐同时给了较高的z-index值确保它能显示在页面上方。 第二种
templatediv v-ifvisible classannouncement-containerdiv classannouncement-content :style{ width: contentWidth px }span{{ message }}/span/divbutton classclose-btn clickcloseAnnouncementx/button/div
/templatescript setup
import { ref, onMounted } from vue;const visible ref(true); // 公告是否显示
const message ref(这是一条滚动公告您可以设置任何内容显示在这里。);
const contentWidth ref(0); // 动态计算公告内容的宽度// 页面加载时计算公告的宽度
onMounted(() {contentWidth.value window.innerWidth / 2; // 公告宽度为页面宽度的50%
});// 关闭公告的逻辑
const closeAnnouncement () {visible.value false;
};/scriptstyle 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
2. 注册全局组件
在你的项目的入口文件比如main.js或者main.ts如果是 Vue 3 TypeScript 的话中进行全局组件注册示例如下
import { createApp } from vue;
import App from ./App.vue;
import Notice from ./components/Notice.vue;const app createApp(App);
// 注册全局公告组件
app.component(Notice, Notice);
app.mount(#app);通过app.component方法将Notice组件注册为全局组件这样在项目的任何页面组件中都可以直接使用标签来展示公告栏了。
3. 使用
例如在App.vue或者其他页面组件中使用
templatediv idappNotice /router-view/router-view/div
/template
