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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
浅谈js的异步执行
Oct 18 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
基于Vue实例对象的数据选项
2017/08/09 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python中的日期时间处理详解
2016/11/17 Python
python 反向输出字符串的方法
2018/07/16 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
为什么会有内存对齐
2016/10/10 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
网页美工求职信
2014/02/15 职场文书
学生操行评语大全
2014/04/24 职场文书
小班评语大全
2014/05/04 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
电影雷锋观后感
2015/06/10 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android