Vue替代marquee标签超出宽度文字横向滚动效果


Posted in Javascript onDecember 09, 2019

一、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标签超出宽度文字横向滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 #Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 #Javascript
简述Vue中容易被忽视的知识点
Dec 09 #Javascript
vue路由传参三种基本方式详解
Dec 09 #Javascript
vue使用nprogress实现进度条
Dec 09 #Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 #Javascript
vue vant Area组件使用详解
Dec 09 #Javascript
You might like
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
axios基本入门用法教程
2017/03/25 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python设计模式之单例模式实例
2014/04/26 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
如何用Python合并lmdb文件
2018/07/02 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python实现猜拳游戏
2020/03/04 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
读群众路线心得体会
2014/03/07 职场文书
责任担保书范文
2014/05/21 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
服务承诺书
2015/01/19 职场文书
优秀员工自荐书
2015/03/06 职场文书
诚信高考倡议书
2019/06/24 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技