Vue如何实现类似marquee标签的横向滚动超出宽度文字效果？

本文共计748个文字，预计阅读时间需要3分钟。

一、使用npm安装

1. 打开命令行工具（如终端、命令提示符等）。

2.输入以下命令进行安装：

npm install

其中 `` 需要替换为你想要安装的插件或库的名称。

3. 安装完成后，你可以在项目的 `node_modules` 文件夹中找到安装的插件或库。

二、安装自定义插件

1. 创建一个新文件夹作为你的项目目录。

2.在命令行中进入该文件夹。

3.初始化一个新的npm项目：

npm init -y

4. 创建一个名为 `index.js` 的文件，并编写你的插件代码。

5.在命令行中运行以下命令安装你的插件：

npm install .

这会将你的插件添加到 `node_modules` 文件夹中，并使其可在项目中使用。

一、npm 安装

如果你想安装插件（自己写的）

安装

# install dependencies npm i marquee-components

使用

在main.js引入

import marquee from 'marquee-components' Vue.use(marquee );

在页面使用

<template> <div id="app"> <marquee :val="msg"></marquee> </div> </template> <script> export default { name: 'app', data () { return { msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } </script>

val后加文字即可，当超过文本容器长度时，触动横向滚动效果。

二、直接引入组件

marquee组件

<template> <div class="marquee-wrap"> <div class="scroll"> <p class="marquee">{{text}}</p> <p class="copy"></p> </div> <p class="getWidth">{{text}}</p> </div> </template> <script> export default { name: 'marquee', props: ['val'], data () { return { timer: null, text: '' } }, created () { let timer = setTimeout(() => { this.move() clearTimeout(timer) }, 1000) }, mounted () { for (let item of this.val) { this.text += ' ' + item } }, methods: { move () { let maxWidth = document.querySelector('.marquee-wrap').clientWidth let width = document.querySelector('.getWidth').scrollWidth if (width <= maxWidth) return let scroll = document.querySelector('.scroll') let copy = document.querySelector('.copy') copy.innerText = this.text let distance = 0 this.timer = setInterval(() => { distance -= 1 if (-distance >= width) { distance = 16 } scroll.style.transform = 'translateX(' + distance + 'px)' }, 20) } }, beforeDestroy () { clearInterval(this.timer) } } </script> <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee{ margin-right: 16px; } p { word-break:keep-all; white-space: nowrap; font-size: 16px; font-family: "微软雅黑 Light"; } .scroll { display: flex; } .getWidth { word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0; } </style>

其他页面引入marquee组件

<template> <div class="container"> <marquee :val="title"></marquee> </div> </template> <script> import marquee from './marquee' name: 'index', components: { marquee }, data () { return { title: '' } }, </script>

总结

以上所述是小编给大家介绍的Vue替代marquee标签超出宽度文字横向滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对易盾网络网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！