Vue 封装公告滚动

文章目录

    • 需求
    • 分析
      • 1. 创建公告组件Notice.vue
      • 2. 注册全局组件
      • 3. 使用

需求

系统中需要有一个公告展示,且这个公告位于页面上方,每个页面都要看到

在这里插入图片描述

分析

1. 创建公告组件Notice.vue

  1. 第一种
    在你的项目的合适组件目录下(比如components目录)创建Notice.vue文件,内容如下:
<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';// 控制公告栏是否显示的响应式变量
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);});
});
</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>

亮点:

  1. 通过showNotice这个ref来控制公告栏是否显示,初始化为true表示默认显示。
    noticeText用来存放公告的具体文本内容,这里提供了一个示例文本,实际使用时可以替换成真实的公告内容来源(比如从接口获取等)。
  2. closeNotice方法用于点击关闭按钮时隐藏公告栏,即将showNotice设置为false。
    样式部分,设置公告栏为固定定位在页面顶部,设置了合适的背景色、文字颜色、内边距等,并且让关闭按钮靠右对齐,同时给了较高的z-index值确保它能显示在页面上方。
  1. 第二种
<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("这是一条滚动公告,您可以设置任何内容显示在这里。");
const contentWidth = ref(0); // 动态计算公告内容的宽度// 页面加载时计算公告的宽度
onMounted(() => {contentWidth.value = window.innerWidth / 2; // 公告宽度为页面宽度的50%
});// 关闭公告的逻辑
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>

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或者其他页面组件中使用:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892565.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

asp.net core webapi 并发请求时 怎么保证实时获取的用户信息是此次请求的?

对于并发请求&#xff0c;每个请求会被分配到一个独立的线程或线程池工作线程上。通过 HttpContext 或 AsyncLocal&#xff0c;每个线程都能独立地获取到它自己的上下文数据。由于这些数据是与当前请求相关的&#xff0c;因此在并发请求时不会互相干扰。 在并发请求时&#xf…

Win10微调大语言模型ChatGLM2-6B

在《Win10本地部署大语言模型ChatGLM2-6B-CSDN博客》基础上进行&#xff0c;官方文档在这里&#xff0c;参考了这篇文章 首先确保ChatGLM2-6B下的有ptuning AdvertiseGen下载地址1&#xff0c;地址2&#xff0c;文件中数据留几行 模型文件下载地址 &#xff08;注意&#xff1…

HTTP-响应协议

HTTP的响应过程&#xff1f; 浏览器请求数据--》web服务器过程&#xff1a;请求过程 web服务器将响应数据-》到浏览器&#xff1a;响应过程 响应数据有哪些内容&#xff1f; 1.和请求数据类似。 2. 响应体中存储着web服务器返回给浏览器的响应数据。并且注意响应头和响应体之间…

深入解析 Python 2 与 Python 3 的差异与演进

Python 2 和 Python 3 是 Python 编程语言的两个主要版本。Python 3 于 2008 年发布&#xff0c;旨在解决 Python 2 中的一些设计缺陷&#xff0c;并引入了许多新特性。虽然 Python 2 在很长一段时间内仍然被广泛使用&#xff0c;但自 2020 年 1 月 1 日起&#xff0c;Python 2…

【“软件工程”基础概念学习】

基础和相关概念 英文&#xff1a;Software Engineering 软&#xff1a;物体内部的组织疏松&#xff0c;受外力作用后容易改变形状软件&#xff1a; 计算机系统的组成部分&#xff0c;是指挥计算机进行计算、判断、处理信息的程序系统。通常分为系统软件和应用软件。借指某项活…

爬虫基础之爬取歌曲宝歌曲批量下载

声明&#xff1a;本案列仅供学习交流使用 任何用于非法用途均与本作者无关 需求分析: 网站:邓紫棋-mp3在线免费下载-歌曲宝-找歌就用歌曲宝-MP3音乐高品质在线免费下载 (gequbao.com) 爬取 歌曲名 歌曲 实现歌手名称下载所有歌曲 本案列所使用的模块 requests (发送…

C++ 鼠标轨迹算法 - 防止游戏检测

一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序&#xff0c;它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言&#xff0c;原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势&#xff1a; 模拟…

2025年中科院分区大类划分公布!新增8155本

2025年中科院分区表变更情况 扩大收录范围 2025年的期刊分区表在原有的自然科学&#xff08;SCIE&#xff09;、社会科学&#xff08;SSCI&#xff09;和人文科学&#xff08;AHCI&#xff09;的基础上&#xff0c;增加了ESCI期刊的收录&#xff0c;并根据这些期刊的数据进行…

【前端动效】HTML + CSS 实现打字机效果

目录 1. 效果展示 2. 思路分析 2.1 难点 2.2 实现思路 3. 代码实现 3.1 html部分 3.2 css部分 3.3 完整代码 4. 总结 1. 效果展示 如图所示&#xff0c;这次带来的是一个有趣的“擦除”效果&#xff0c;也可以叫做打字机效果&#xff0c;其中一段文本从左到右逐渐从…

负载均衡服务器要怎么配置?

目录 一、概述&#xff1a; 二、硬件配置&#xff1a; 三、操作系统配置&#xff1a; 四、负载均衡软件&#xff1a; 五、网络配置&#xff1a; 六、软件安装步骤&#xff1a; 6.1 安装 Nginx 6.2 安装 LVS 6.3 安装 HAProxy 6.4 安装 Keepalived 一、概述&#xff1…

提升租赁效率的租赁小程序全解析

内容概要 在如今快节奏的生活中&#xff0c;租赁小程序俨然成为了提升租赁效率的一把利器。无论是个人还是企业&#xff0c;都会因其便捷的功能而受益。简单来说&#xff0c;租赁小程序能让繁琐的租赁流程变得轻松、高效。在这里&#xff0c;我们将带您畅游租赁小程序的海洋&a…

Docker--Docker Compose(容器编排)

什么是 Docker Compose Docker Compose是Docker官方的开源项目&#xff0c;是一个用于定义和运行多容器Docker应用程序的工具。 服务&#xff08;Service&#xff09;&#xff1a;在Docker Compose中&#xff0c;一个服务实际上可以包括若干运行相同镜像的容器实例&#xff0…

搭建docker私有化仓库Harbor

Docker私有仓库概述 Docker私有仓库介绍 Docker私有仓库是个人、组织或企业内部用于存储和管理Docker镜像的存储库。Docker默认会有一个公共的仓库Docker Hub,而与Docker Hub不同,私有仓库是受限访问的,只有授权用户才能够上传、下载和管理其中的镜像。这种私有仓库可以部…

本地视频进度加入笔记+根据进度快速锁定视频位置

本地视频进度记录快速回溯 引言 在学习的过程中, 如果我们想快速记录当前看视频的位置, 后续回溯查找就会非常方便了。 实现效果 进度记录 通过按下快捷键ctrlaltu&#xff0c; 快速记录当前视频的进度信息,然后复制到typora软件内 快速回溯 在typora软件内, 选中视频索引…

网络传输层TCP协议

传输层TCP协议 1. TCP协议介绍 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一个要对数据的传输进行详细控制的传输层协议。 TCP 与 UDP 的不同&#xff0c;在于TCP是有连接、可靠、面向字节流的。具体来说&#xff0c;TCP设置了一大…

《自动驾驶与机器人中的SLAM技术》ch7:基于 ESKF 的松耦合 LIO 系统

目录 基于 ESKF 的松耦合 LIO 系统 1 坐标系说明 2 松耦合 LIO 系统的运动和观测方程 3 松耦合 LIO 系统的数据准备 3.1 CloudConvert 类 3.2 MessageSync 类 4 松耦合 LIO 系统的主要流程 4.1 IMU 静止初始化 4.2 ESKF 之 运动过程——使用 IMU 预测 4.3 使用 IMU 预测位姿进…

LeetCode 每日一题 2025/1/6-2025/1/12

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 1/6 2274. 不含特殊楼层的最大连续楼层数1/7 3019. 按键变更的次数1/8 2264. 字符串中最大的 3 位相同数字1/9 3297. 统计重新排列后包含另一个字符串的子字符串数目 I1/10…

《解锁鸿蒙Next系统人工智能语音助手开发的关键步骤》

在当今数字化时代&#xff0c;鸿蒙Next系统与人工智能的融合为开发者带来了前所未有的机遇&#xff0c;开发一款人工智能语音助手应用更是备受关注。以下是在鸿蒙Next系统上开发人工智能语音助手应用的关键步骤&#xff1a; 环境搭建与权限申请 安装开发工具&#xff1a;首先需…

基于大语言模型的组合优化

摘要&#xff1a;组合优化&#xff08;Combinatorial Optimization, CO&#xff09;对于提高工程应用的效率和性能至关重要。随着问题规模的增大和依赖关系的复杂化&#xff0c;找到最优解变得极具挑战性。在处理现实世界的工程问题时&#xff0c;基于纯数学推理的算法存在局限…

Redis 代理( Twemproxy 或 Redis Proxy)

文章目录 TwemproxyTwemproxy 的主要特性Twemproxy 的部署架构Twemproxy 的配置示例安装 Twemproxy配置文件&#xff08;YAML 示例&#xff09;启动 Twemproxy Twemproxy 的优缺优点缺点 Redis ProxyRedis Proxy 的主要特性Redis Proxy 的部署架构Redis Proxy 的配置和使用Twem…