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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
原生js实现放大镜特效
Mar 08 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
原生js实现贪吃蛇游戏
Oct 26 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php实现头像上传预览功能
2017/04/27 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
jQuery 联动日历实现代码
2012/05/31 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
python数据结构之链表详解
2017/09/12 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
资深地理教师自我评价
2013/09/21 职场文书
实习医生自我评价
2013/09/22 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android