首页 > 其他分享 >Vue 文本字幕组件(Marquee Text Component)

Vue 文本字幕组件(Marquee Text Component)

时间:2023-09-13 18:12:29浏览次数:40  
标签:vue MarqueeText Marquee Text marquee component Vue text

简介及使用教程

Vue 文本字幕组件(Marquee Text Component)是一个Vue.js的字幕文本组件,具有CSS GPU动画、快速、功能强大等特点。

安装

Npm

npm i vue-marquee-text-component

Yarn

yarn add vue-marquee-text-component

 

使用

全局注册

import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'

Vue.component('marquee-text', MarqueeText)

组件中引入

import MarqueeText from 'vue-marquee-text-component'

export default {
  name: 'HelloWorld',
  components: {
    MarqueeText
  }
}

template

<!--简单字幕文字 -->
<marquee-text>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</marquee-text>

<!-- 重复短语字幕 -->
<marquee-text :repeat="10">
  Short text =(
</marquee-text>

<!-- 滚动时间 -->
<marquee-text :duration="30">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</marquee-text>

示例

 

 

标签:vue,MarqueeText,Marquee,Text,marquee,component,Vue,text
From: https://www.cnblogs.com/Jishuyang/p/17700376.html

相关文章

  • vue 大转盘旋转效果
    场景如下:用户点击抽奖,转盘立刻线性提速转动,同时请求抽奖接口,旋转过程中等待接口返回抽奖信息接口返回信息后,转盘减速至停转网上找到animejs动画框架,想钻研的同学可以看一下,我没有用此框架实现,是手写的这个demo没有实现停在指定奖品上也没有实现完全停止后,正好停在0°<temp......
  • 记录--用 Vue 实现原神官网的角色切换效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言为了更好的了解原神角色,我模仿官网做了一个角色切换效果,在做的过程当中也总结了一些技术点。为了让大家更好的体验,我兼容了PC端和移动端,建议在PC端查看效果更佳。接下来就为大家简单的分享一下!话不多说,......
  • Transformer-empowered Multi-scale Contextual Matching and Aggregation for
    Transformer-empoweredMulti-scaleContextualMatchingandAggregationforMulti-contrastMRISuper-resolution(阅读文献)10.12基于变压器的磁共振多对比度超分辨率多尺度背景匹配与聚合摘要:MRI可以显示相同解剖结构的多对比图像,使多对比超分辨率(SR)技术成为可能。和使用单一......
  • 《VUE》走马灯组件
    <template><!--走马灯--><divclass="box"><divclass="carousel"><divclass="item"v-for="(v,i)inlist":key="i"@click="open(v)"><img:sr......
  • ctfhub---ret2text
    一、程序初步分析 没有开任何保护,64位程序二、IDA反编译 main函数中的gets函数没有对输入限制长度,存在栈溢出 secure函数中出现了system("/bin/sh"),让main函数的返回地址rip指向该函数即可  查看main函数中的输入v4,距离ebp0x70,加上64位ebp共8个字节,覆盖返回地址需......
  • application 'vueApp' died in status NOT_MOUNTED: [qiankun]: Target container wit
    这是第一次微前端很常见的提示,尤其是第一次写前端的时候碰到的解决1:主应用的 App.vue标签上的id="app"去掉,这是报错的根本解决2://在子应用挂在的时候处理functionrender(props={}){const{container}=props;instance=newVue({render:h=>h......
  • 【Vue】带你进入七彩缤纷的世界
    hello,我是小索奇,Vue.js精心准备撰写了文章,其中进行多次修改给读者更好的学习进程,涵盖Vue2和Vue3,让大家用最通俗的方式来学会Vue,本系列会考虑到新手,将由浅入深进行讲解,即使你是老玩家,也可以收藏备用,其中有很多已经踩过的坑为大家铺垫平滑的道路~若您有任何问题,欢迎沟通,共同进......
  • nvm、node、vue安装、vue项目创建打包
    nvm、node、vue安装、创建vue项目nvm作用:可以管理多个版本的node,切换node版本,下载node。前情提要参考:https://zhuanlan.zhihu.com/p/519270555下载地址:https://github.com/coreybutler/nvm-windows/releases一、常用命令1、nvm查看安装了的nodenvmlsnvml......
  • vue导出带样式的excel
    示例说明实现导出excel不同块的颜色templatea标签仅做文件名称调整,默认为隐藏状态;<template><div><button@click="exportExcel">导出</button><aref="export_a"/></div></template>scriptexportdefault{name......
  • Vue3语法基本使用
    1、watch使用watch(监听数据源,执行函数,[配置参数])//配置参数:立即执行深度监听{immediate:true,deep:true}1.1监听基本数据类型单一数据源<scriptsetup>import{ref,watch}from'vue'letname=ref('张麻子')//监听器watch(name,(new......