v-marquee 指令

介绍

v-marquee 指令用于进行文本滚动，支持 x，y 滚动、滚动速度，滚动开始、滚动中、滚动完回调函数。

基础方法

将 v-marquee 指令添加到需要文本滚动的元素上：

<template>
  <div
    v-marquee="{
      direction: 'y',
      speed: 30,
      onStart: handleStart,
      onScroll: handleScroll,
      onComplete: handleComplete
    }"
  >
    <div class="marquee-content">
      <div>这是一段需要滚动的文本</div>
    </div>
  </div>
</template>

设置 y 轴滚动

将direction设置为y时即可实现纵向滚动。

查看代码

<template>
  <a-card style="height: 40vh; overflow: hidden">
    <div
      v-marquee="{
        direction: 'y',
        speed: 10,
        onStart: () => {},
        onUpdate: () => {},
        onComplete: () => {}
      }"
      class="marquee-content"
    >
      <p class="marquee-text">
        通知通常用來傳達一些比較簡單直接的事情，比如機關團體用來通知開會
        或者繳費，使用範圍比較狹窄。很多應用文專著都沒有「通知」這個類別，或
        是把通知與通告視為可以互相替換的文種；因此會議通知有時候等同於會議通
        告，繳費通知則經常以單據或者表列的形式發出，比如很多公營服務機構的繳
        費單就是如此。從香港一般民間的使用情況來看，通知的結構和格式都不太固 定。
        至於公告，則是面向社會大眾的，一般由政府機關發出，目的在宣佈重大
        事項或者重要政策。通知和公告這兩類文種在這裡不作詳細介紹。
        通告和佈告的形式和作用很接近，分別主要在於發佈的方式和範圍不同。
        一般來說，通告是機關團體向一定範圍的民眾或者員工公佈應當注意或者應當
        遵守的事項時所用的文書，多數是直接發出或者寄出的。佈告則會張貼在佈告
        板或者其他當眼的地方，供有關人士閱覽。這種發佈消息的形式，使佈告的覆
        蓋範圍受到局限，因此佈告所涉及的對象，通常是特定範圍裡的有關民眾或者 員工。
        此外，佈告通常是機關團體對受其制約的民眾或者員工所發的，目的在公
        佈政策、措施或者重要事項，因此具有一定的約束作用。
        最不具備約束作用的是啟事。不少啟事是由個人發出的，比如尋人啟事、
        遺失啟事、轉讓啟事等，所牽涉的多數是個人的事情；就算是以公司或者機構
        名義發出的，也往往是與機構本身有關的事情，比如搬遷啟事、招聘啟事等。
        啟事的受文對象比較模糊，通常是沒有既定範疇的一般民眾，對啟事內容有興
        趣或者自認為有關聯的，可以有所回應，否則可以置之不理。
      </p>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { vMarquee } from '@cp-vuedir/core'
</script>

<style scoped>
.marquee-content {
  padding: 20px;
}

.marquee-text {
  font-size: 24px;
  color: black;
  width: 100%;
}
</style>

设置 x 轴滚动

将direction设置为x时即可实现横向滚动。

TNT-Weekly是一个由 [腾讯新闻前端团队](https://github.com/tnfe) 创建于2019年的开源技术周刊。面向前端开发者和爱好者，分享优雅而有用的前端技术。推出后受到了持续关注，目前GitHub关注量已经突破3k。

查看代码

<template>
  <div class="marquee-container">
    <div
      v-marquee="{
        direction: 'x',
        speed: 100,
        onStart: () => {},
        onUpdate: () => {},
        onComplete: () => {}
      }"
      class="marquee-content"
    >
      <span class="marquee-text"
        >TNT-Weekly是一个由 [腾讯新闻前端团队](https://github.com/tnfe)
        创建于2019年的开源技术周刊。面向前端开发者和爱好者，分享优雅而有用的前端技术。推出后受到了持续关注，目前GitHub关注量已经突破3k。</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { vMarquee } from '@cp-vuedir/core'
</script>

<style scoped>
.marquee-container {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  padding: 0 20px;
}

.marquee-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: glow 1.5s infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  to {
    text-shadow:
      2px 2px 8px rgba(255, 255, 255, 0.7),
      0 0 12px rgba(255, 255, 255, 0.7);
  }
}
</style>

设置回掉函数

通过这是onStart,onUpdate和onComplete回掉函数内容，实现在开始滚动、滚动中、滚动结束时的回掉。

开始状态：未开始

进度：0%

完成状态：未完成

查看代码

<template>
  <a-card style="overflow: hidden; height: 80px">
    <div
      v-marquee="{
        direction: 'x',
        speed: 50,
        onStart: handleStart,
        onUpdate: handleUpdate,
        onComplete: handleComplete
      }"
      class="marquee-content"
    >
      <p class="marquee-text">
        在前端开发中，如何提升代码的可读性与复用性一直是开发者关注的焦点。这几天，发现了一个适用于vue的超强工具库VueUse！它以其丰富的功能和极高的易用性，成为
        Vue 3 开发者的首选工具库。
      </p>
    </div>
  </a-card>
  <div class="status">
    <p>开始状态：{{ startStatus }}</p>
    <p>进度：{{ updateStatus }}</p>
    <p>完成状态：{{ completeStatus }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vMarquee } from '@cp-vuedir/core'

const startStatus = ref('未开始')
const updateStatus = ref('0%')
const completeStatus = ref('未完成')

function handleStart() {
  startStatus.value = '已开始'
  updateStatus.value = '0%'
  completeStatus.value = '进行中'
}

function handleUpdate(progress: number) {
  updateStatus.value = `${(progress * 100).toFixed(0)}%`
}

function handleComplete() {
  completeStatus.value = '已完成'
}
</script>

<style scoped>
.marquee-text {
  font-size: 40px;
  font-weight: bold;
  color: #165dff;
  font-family: 'Courier New', Courier, monospace;
}

.status {
  margin-top: 20px;
  color: var(--vp-vp-text-1);
  font-size: 16px;
}
</style>

API

属性名	说明	类型	是否必选	默认值
direction	滚动方向，x表示水平滚动，y表示垂直滚动	String	○	x
speed	滚动速度，单位为(像素/秒)	Number	○	50
onStart	滚动开始触发的回调函数	Function	○	null
onScroll	滚动中触发的回调函数	Function	○	null
onComplete	单次滚动结束时触发的回调函数	Function	○	null

注意事项

注意

• 容器样式：确保滚动容器 （.marquee-container） 具有固定的高度和宽度，以便正确计算滚动区域。设置适当的 overflow 属性以隐藏溢出的内容。
• 内容样式：确保滚动内容 （.marquee-content） 的宽度和高度与容器匹配，以便正确滚动。