Vue怎么实现超出宽度文字横向滚动效果

发布时间:2022-11-14 09:32:48 作者:iii
来源:亿速云 阅读:1230

今天小编给大家分享一下Vue怎么实现超出宽度文字横向滚动效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一、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是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

以上就是“Vue怎么实现超出宽度文字横向滚动效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. css如何实现文字内容若超出设定宽度则用省略号代替余下内容
  2. Vue如何替代marquee标签超出宽度文字横向滚动效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:windows中大容量的u盘如何改成fat32格式

下一篇:windows下wps表格无法粘贴信息如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》