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

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