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

今天和大家分享一个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.innerHTMLconst 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>