文字滚动效果组件和按钮组件

今天和大家分享一个vue中好用的组件，是我自己写的，大家也可以自己改，就是文字的循环滚动效果，如下图，文字会向左移动，结束之后也会有一个循环，还有一个按钮组件，基本框架写的差不多了已经，大家可以看着改，如果使用直接拿走就行了

文字：  相应效果图： 

相应使用方法：

章节使用组件就可以了 

文字滚动源代码：

大家使用只需要改上面的文字就行了，字体样式大家在对应元素的css当中写 

<template> <div class="announcement"> <!-- 头部图标和标题 --> <div class="announcement_icon"><span class="icon iconfont">&#xe506;</span></div> <div class="announcement_title">最新公告</div> <!-- 滚动区域 --> <div class="announcement_text"> <!-- 添加滚动容器 --> <div ref="scrollDiv" class="scroll-container"> <!-- 双份相同内容实现无缝循环 --> <div ref="scrollBegin" class="scroll-content"> <span class="pad_right">{{ announcementText }}</span> </div> <div ref="scrollEnd" class="scroll-content"></div> </div> </div> </div> </template> <script setup> import { ref, onMounted } from 'vue' const announcementText = `在当今数字化时代，人工智能（AI）已经逐渐渗透到我们生活的方方面面。从智能家居设备到自动驾驶汽车，AI 的应用正在不断扩展和深化。随着技术的不断进步，AI 的能力也在不断提升，它不仅能够处理复杂的计算任务，还能模拟人类的思维和行为模式。 AI 的发展带来了许多机遇和挑战。一方面，它极大地提高了生产效率，改善了人们的生活质量。例如，医疗领域中，AI 可以帮助医生更准确地诊断疾病，提供个性化的治疗方案。另一方面，AI 也引发了一些伦理和社会问题，如隐私保护、数据安全和就业结构的变化。这些问题需要我们在技术发展的过程中不断探索和解决。 未来，AI 将继续在更多领域发挥重要作用。教育、金融、交通等行业都将受益于 AI 的创新应用。同时，随着 AI 技术的普及，人们对其理解和接受度也在提高。这将有助于推动 AI 更好地服务于社会，为人类创造更多的福祉。` // 简化的公告文本 const scrollDiv = ref(null) const scrollBegin = ref(null) const scrollEnd = ref(null) let MyMar = null const speed = 10 // 滚动速度（数值越大越慢） const initMarquee = () => { if (!scrollBegin.value || !scrollEnd.value || !scrollDiv.value) return // 克隆内容实现无缝滚动 scrollEnd.value.innerHTML = scrollBegin.value.innerHTML const marquee = () => { if (!scrollDiv.value) return // 判断滚动位置重置 if (scrollDiv.value.scrollLeft >= scrollBegin.value.offsetWidth) { scrollDiv.value.scrollLeft = 0 } else { scrollDiv.value.scrollLeft += 1 } } // 设置滚动间隔 MyMar = setInterval(marquee, speed) // 鼠标控制 scrollDiv.value.addEventListener('mouseenter', () => clearInterval(MyMar)) scrollDiv.value.addEventListener('mouseleave', () => { MyMar = setInterval(marquee, speed) }) } onMounted(() => { initMarquee() }) </script> <style scoped> /* 基础布局 */ .announcement { display: flex; align-items: center; height: 78px; background: #f8f9fa; padding: 0 20px; z-index: -10; } /* 图标样式 */ .announcement_icon { color: #338bcd; margin-right: 10px; } .announcement_icon .iconfont { font-size: 29px; } /* 标题样式 */ .announcement_title { font-size: 22px; color: #006fc1; white-space: nowrap; margin-right: 20px; } /* 滚动区域 */ .announcement_text { width: 100%; height: 100%; line-height: 78px; overflow: hidden; position: relative; } .scroll-container { display: inline-flex; /* 关键：保持内容横向排列 */ white-space: nowrap; /* 禁止文字换行 */ position: absolute; animation: marquee 40s linear infinite; /* 备用CSS动画 */ z-index: 100; } .scroll-content { display: inline-block; padding-right: 50px; /* 内容间隔 */ } /* 鼠标悬停暂停 */ .scroll-container:hover { animation-play-state: paused; } /* 备用CSS动画 */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 响应式适配 */ @media (max-width: 768px) { .announcement { padding: 0 10px; height: 60px; } .announcement_title { font-size: 16px; margin-right: 10px; } .scroll-content { font-size: 14px; } } </style>

 

按钮：

效果图： 相应使用方法： <el-row> <MButton type="" >普通</MButton> <MButton type="primary">主要</MButton> <MButton type="success">成功</MButton> <MButton type="info">信息</MButton> <MButton type="warning">警告</MButton> MButton type="danger">危险</MButton> </el-row> <el-row> <MButton type="" plain>普通</MButton) <MButton type="primary" plain>主要</MButton) <MButton type="success" plain>成功</MButton) <MButton type="info" plain>信息</MButton> <MButton type="warning" plain>警告</MButton, <MButton type="danger"plain>危险</MButton> </e1-row> <el-row> <MButton type="" round>普通</MButton> <MButton type="primary" round>主要</MButton》 <MButton type="success" round>成功</MButton) <MButton type="info" round>信息</MButton> <MButton type="warning" round>警告</MButton: <MButton type="danger" round>危险</MButton> </el-row> <el-row> <MButton type="" circle icon="fa-trash "></MButton> <MButton type="primary" circle icon="fa-trash "></MButtonMButton type="success" circle icon="fa-trash "></MButton<MButton type="info" circle icon="fa-trash"></MButton><MButton type="warning" circle icon="fa-trash "></MButton."></MButton>MButton type="danger" circle icon="fa-trash </el-row> <MButton type="text">你好</MButton> >主要</MButton><MButton type="primary" medium>主要</MButton><MButton type="primary" MButton type="primary'sma1l>主要</MButton) mini>主要</MButton><MButton type="primary" <MButton type="primary":loading="true">加载中</MButton>  按钮组件源代码： <template> <button :class="[classColorType, classStyleType, classSizeType, classDisable]"> <i v-if="loading" class="fa fa-spinner fa-spin"></i> <i v-else :class="['fa', icon]"></i> <span><slot></slot></span> </button> </template> <script> export default { props: { type: { type: String, default: 'default' }, loading: { typeof: Boolean, default: false }, icon: { type: String, default: '' // 默认没有图标 }, mini: { type: Boolean, default: false // 不传则默认为 false }, small: { type: Boolean, default: false }, medium: { type: Boolean, default: false }, plain: { type: Boolean, default: false }, round: { type: Boolean, default: false }, circle: { type: Boolean, default: false }, disabled: { type: Boolean, default: false } }, data () { return { myType: this.type } }, methods: { changeType () { this.myType = '' // 修改本地数据而不是 prop } }, computed: { classDisable () { if (this.disabled) { return 'disabled-button' } return '' }, classColorType () { const map = { primary: 'primary-button', success: 'success-button', info: 'info-button', warning: 'warning-button', danger: 'danger-button', text: 'text-button', default: 'color-default-button' } if (this.plain) { return map.default } return map[this.type] || map.default }, classStyleType () { if (this.plain) { if (this.type === 'primary') { return 'plain-primary-button' } if (this.type === 'success') { return 'plain-success-button' } if (this.type === 'info') { return 'plain-info-button' } if (this.type === 'warning') { return 'plain-warning-button' } if (this.type === 'danger') { return 'plain-danger-button' } if (this.type === 'default') { return 'color-default-button' } } if (this.round) return 'round-button' if (this.circle) return 'circle-button' return '' }, classSizeType () { if (this.medium && !this.circle && this.type !== 'text') return 'medium-button' if (this.small && !this.circle && this.type !== 'text') return 'small-button' if (this.mini && !this.circle && this.type !== 'text') return 'mini-button' return 'size-default-button' } } } </script> <style scoped lang="less"> button{ display: inline-block; border: 1px solid rgb(225, 225, 225); white-space: nowrap; cursor: pointer; text-align: center; box-sizing: border-box; outline: none; font-weight: 500; border-radius: 4px; transition: 0.1s; } .fa{ display: inline-block; // vertical-align: middle; /* 将图标垂直居中 */ margin-bottom: 2px; margin: 0px 2px; } .size-default-button{ font-size: 14px; height: 40px; line-height: 40px; padding: 1px 20px; } .medium-button{ font-size: 13px; height: 36px; padding: 0px 18px; line-height: 36px; } .small-button{ font-size: 12px; height: 32px; padding: 1px 17px; line-height: 32px; } .mini-button{ font-size: 10px; padding: 0px 16px; height: 28px; } .text-button{ background-color: #ffffff00; border: none; color: #626262; } .text-button:hover{ color: #347eff; } .color-default-button{ background-color: #ffffff; color: #606266; } .primary-button{ background-color: #5593ff; color: #ffffff; } .success-button{ background-color: #7fd06d; color: #ffffff; } .info-button{ background-color: #4d596d; color: #ffffff; } .warning-button{ background-color: #efb136; color: #ffffff; } .danger-button{ background-color: #cd5353; color: #ffffff; } .primary-button { background-color: #3697ff; color: #ffffff; } .success-button { background-color: #28a745; color: #ffffff; } .danger-button { background-color: #dc3545; color: #ffffff; } /* 不同颜色按钮的 hover 效果 */ .color-default-button:hover { background-color: rgba(202, 228, 255, 0.5); /* 最后一个参数 0.5 表示透明度 */ color: #2a7cee; } .primary-button:hover { background-color: #0076f5; opacity: 0.5; } .info-button:hover { background-color: #5f6861; opacity: 0.5; } .warning-button:hover { background-color: #ebc04b; opacity: 0.5; } .success-button:hover { background-color: #429d56; opacity: 0.5; } .danger-button:hover { background-color: #c82333; opacity: 0.5; } .plain-primary-button{ color: #0076f5; background-color: rgba(223, 238, 255, 0.5); } .plain-success-button{ color: #33b847; background-color: rgba(223, 255, 225, 0.5); } .plain-info-button{ color: #606060; background-color: rgba(228, 228, 228, 0.5); } .plain-warning-button{ color: #ff9913; background-color: rgba(255, 245, 223, 0.5); } .plain-danger-button{ color: #f53100; background-color: rgba(255, 223, 223, 0.5); } .plain-primary-button:hover{ background-color: #5589e3; color: #ffffff; } .plain-success-button:hover{ background-color: #8adc78; color: #ffffff; } .plain-info-button:hover{ background-color: #606a7b; color: #ffffff; } .plain-warning-button:hover{ background-color: hsl(35, 68%, 64%); color: #ffffff; } .plain-danger-button:hover{ background-color: #e76262; color: #ffffff; } .round-button{ border-radius: 50% / 100%; } .circle-button{ width: 40px !important; height: 40px !important; border-radius: 50%; padding-bottom: 1px; align-items: center !important; } .circle-button i{ margin-left: -5px; } .circle-button span{ margin-left: -8px; } .disabled-button { cursor: not-allowed !important; opacity: 0.5; pointer-events: none; } /* 不同颜色按钮的 active 效果（点击时变淡） */ .color-default-button:active { border: 1px solid rgb(142, 159, 255); color: #659eff; background-color: #c0dbff5c; } .primary-button:active { background-color: rgb(39, 117, 195); opacity: 1; } .info-button:active { background-color: rgb(65, 62, 62); opacity: 1; } .warning-button:active { background-color: rgb(221, 169, 25); opacity: 1; } .success-button:active { background-color: rgb(19, 208, 60); opacity: 1; } .danger-button:active { background-color: rgb(204, 26, 44); opacity: 1; } .plain-primary-button:active { background-color: rgb(52, 106, 198); color: rgb(255, 255, 255); } .plain-success-button:active { background-color: rgb(41, 190, 63); color: rgb(255, 255, 255); } .plain-info-button:active { background-color: rgb(96, 96, 96); color: rgb(255, 255, 255); } .plain-warning-button:active { background-color: rgb(220, 145, 46); color: rgb(255, 255, 255); } .plain-danger-button:active { background-color: rgb(215, 89, 89); color: rgb(255, 255, 255); } </style>