vue3自定义指令-文本超出宽度滚动

 fontScroll.ts 指令文件

import { Directive } from 'vue'function randomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}
export default {// 可控制滚动速度,默认滚动速度20px/s,最低动画时长2smounted: (el, binding, vNode): void => {el.style.overflow = 'hidden'el.style.whiteSpace = 'nowrap'const speed = binding.value || 20el.__span__ = document.createElement('span')el.__span__.innerHTML = vNode.children[0].childrenel.innerHTML = ''el.appendChild(el.__span__)// 滚动el.isRoll = () => {if (el.__span__.offsetWidth > el.offsetWidth) {const times = Math.max(Number(el.__span__.offsetWidth - el.offsetWidth) / speed,6)let offsetleft = el.__span__.offsetWidth-100;let mymove = `@keyframes myAnimation { 0% { transform: translate(0px, 0); } 100% { transform: translate(-${offsetleft}px, 0);animation-delay: 2s; } }`;const style:any = document.createElement('style');style.setAttribute('type', 'text/css')document.head.appendChild(style)style.sheet.insertRule(mymove, 0)el.__span__.style.float = 'left';let num = randomInt(1,4);console.log(num)el.__span__.style.animation = `myAnimation linear ${times}s ${num}s infinite normal forwards`} else {el.__span__.style.float = 'none'el.__span__.style.animation = 'none'}}el.__observe__ = new ResizeObserver(el.isRoll)el.__observe__.observe(el, { box: 'border-box' })},updated: (el, _, vNode) => {el.__span__.innerText = vNode.children[0].childrenel.isRoll()},unmounted: (el: any): void => {el.__observe__.disconnect()},
} as Directive<any, number>

main.ts 引入&全局注入

import directives from '@/script/utils/fontScrall'app.directive('textRoll',directives)

页面中使用 v-text-roll

<div v-text-roll> 11月27日上午,王思聪现身山东泰安,以北京寰聚商业管理有限公司
董事长身份,出席了泰安某文旅项目签约活动。 </div>

《完》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

daterangepicker的使用

daterangepicker 是基于JQuery的时间日期选择插件&#xff0c;是一个配合 bootstrap 框架使用的时间范围选择 js 组件 引入 js 和 css <link href"bootstrap.min.css"> <link href"daterangepicker.css"> <script src"jquer…

ubuntu16.04升级openssl

Ubuntu16.04 默认带的openssl版本为1.0.2 查看&#xff1a;openssl version 1.下载openssl wget https://www.openssl.org/source/openssl-1.1.1.tar.gz 编译安装 tar xvf openssl-1.1.1.tar.gz cd openssl-1.1.1 ./config make sudo make install sudo ldconfig 删除旧版本 su…

XXL-Job详解(五):动态添加、启动任务

目录 前言XXL-Job API接口添加任务API动态添加任务动态启动任务 前言 看该文章之前&#xff0c;最好看一下之前的文章&#xff0c;比较方便我们理解 XXL-Job详解&#xff08;一&#xff09;&#xff1a;组件架构 XXL-Job详解&#xff08;二&#xff09;&#xff1a;安装部署 X…

沐风老师3DMAX随机变换工具RandomTransform插件使用方法详解

3DMAX随机变换工具RandomTransform插件使用方法 3dMax随机变换工具RandomTransform&#xff0c;是一款用MAXScript脚本语言开发的3dsMax小工具&#xff0c;可以随机变换选中的单个或多个对象的位置、角度及大小。 在3dMax中“变换”工具是最常用的工具&#xff08;移动、旋转和…

vue3+ts项目中导入组件时报错has no default export

下面这句会报错has no default export import Button from "./components/Button.vue";使用vetur这个插件&#xff08;我目前的版本是0.37.3&#xff0c;应该是这个版本之前的都不支持&#xff09;。但是依旧报错&#xff0c;所以我选择禁用了&#xff0c;就不报错了…

Redis的基本数据类型及常用命令

Redis通用命令 KEYS命令用于查找所有匹配给定模式 pattern 的 key 。生产环境下不建议使用KEYS命令&#xff0c;会影响效率。 匹配规则&#xff1a; h?llo 匹配 hello, hallo 和 hxlloh*llo 匹配 hllo 和 heeeelloh[ae]llo 匹配 hello and hallo, 不匹配 hilloh[^e]llo 匹配 …

selenium自动化测试实战案例

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器&#xff08;如 Chrome、Opera 和 Microsoft Edge&#xff09;中的工具&#xff0c;用于帮助开发人员调试和研究网站。 借助 Chrome DevTools&#xff0c;开发人员可以更深入地访问网站&#xf…

8.4 Windows驱动开发:文件微过滤驱动入门

MiniFilter 微过滤驱动是相对于SFilter传统过滤驱动而言的&#xff0c;传统文件过滤驱动相对来说较为复杂&#xff0c;且接口不清晰并不符合快速开发的需求&#xff0c;为了解决复杂的开发问题&#xff0c;微过滤驱动就此诞生&#xff0c;微过滤驱动在编写时更简单&#xff0c;…

全网最牛最“刑”的Fiddler移动端抓包

本篇文章&#xff0c;博主想使用通俗易懂的话语&#xff0c;让大家明白以下内容&#xff1a; 什么是抓包哪些场景需要用到抓包Fiddler抓包的原理怎样使用Fiddler进行移动端抓包 抓包 包 (Packet) 是TCP/IP协议通信传输中的数据单位&#xff0c;一般也称“数据包”。 我们平常…

[54] 螺旋矩阵 js

题目描述&#xff1a;给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] * 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 解题思路&#xff1a; 按照顺时针一行一列&#xff…

源码安装git

系统&#xff1a; Centos 由于系统自带的yum源仓库的git版本较低&#xff0c;所以在官网下载源码进行编译安装 官网地址&#xff1a;https://git-scm.com/ 源码下载地址&#xff1a;https://github.com/git/git 安装旧版本的git拉去git源码&#xff08;如果是上传到服务器就不用…

无人机智慧工地:助力工地管理的未来之选

在现代工地管理中&#xff0c;无人机凭借其小巧、轻便和多角度拍摄等特点得到广泛应用&#xff0c;尤其在智慧工地的现场管理中发挥着重要作用。 一、无人机代替人工巡检省时省力 以往&#xff0c;施工现场检查主要依赖人工巡检方式&#xff0c;需要较长时间。而现在&#xff…

链表【2】

文章目录 &#x1f95d;24. 两两交换链表中的节点&#x1f951;题目&#x1f33d;算法原理&#x1f96c;代码实现 &#x1f34e;143. 重排链表&#x1f352;题目&#x1f345;算法原理&#x1f353;代码实现 &#x1f95d;24. 两两交换链表中的节点 &#x1f951;题目 题目链接…

【LeetCode热题100】【哈希】最长连续序列

据说是字节跳动二面的原题&#xff0c;这题面试要是让我当场手撕&#xff0c;我直接当场去世T_T 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解…

KMP字符串

试题传送门&#xff1a;831. KMP字符串 给定一个字符串 S&#xff0c;以及一个模式串 P&#xff0c;所有字符串中只包含大小写英文字母以及阿拉伯数字。 模式串 P 在字符串 S 中多次作为子串出现。 求出模式串 P 在字符串 S 中所有出现的位置的起始下标。 输入格式 第一行输入…

Azure Machine Learning - Azure AI 搜索中的索引器

在 Azure AI 搜索中&#xff0c;搜索索引是可搜索的内容&#xff0c;可供搜索引擎用于索引编制、全文搜索和筛选后查询。 索引由架构定义并保存到搜索服务中&#xff0c;第二步是数据导入。 除了在主数据存储中&#xff0c;此内容也存在于搜索服务中&#xff0c;这是在新式应用…

由11月27日滴滴崩溃到近两个月国内互联网产品接二连三崩溃引发的感想

文章目录 知乎文分析微信聊天截图微信公众号 滴滴技术 发文k8s 官方文档滴滴官方微博账号 近两个月国内互联网产品“崩溃”事件2023-10-23 语雀崩溃2023-11-12 阿里云崩溃2023-11-27 滴滴崩溃2023-12-03 腾讯视频崩溃总结 我的感想 知乎文分析 最近连续加班&#xff0c;打车较…

黑猫带你学eMMC协议第31篇:什么是eMMC的驱动强度(Drive Strength)

本文依据eMMC JEDEC5.1及个人工作经验整理而成,如有错误请留言。 文章为个人辛苦整理,付费内容,已加入原创侵权保护,禁止私自转载。 文章所在专栏:《黑猫带你学:eMMC协议详解》 1 简介 首先要清楚: 内阻越大,驱动强度越小;内阻越小,驱动强度越大。 ECSD[185]可调节…

【ARM CoreLink 系列 8.2 -- SMMU 详细介绍-STE Entry 详细介绍 2】

请阅读【ARM CoreLink 文章专栏导读】 上篇文章:【ARM CoreLink 系列 8.1 – SMMU 详细介绍-STE Entry 详细介绍 1】 文章目录 ARM SMMU STE ENTRY1.1 STE Entry WORD[3]1.1.1 MemAttr1.1.2 MTCFG1.1.3 ALLOCCFG1.1.4 SHCFG1.1.5 NSCFG1.1.6 PRIVCFG

todesk连接ubuntu显示当前系统并无桌面环境,或无显示器,无法显示远程桌面,您需要自行安装X11桌面环境,或者使用终端文件功能

ToDesk远程遇到的问题如上图&#xff0c;换向日葵直接黑屏&#xff1b; 问题原因 截止发文时间&#xff0c;Todesk只支持X11协议&#xff0c;没有适配最新的Wayland协议&#xff0c;所以我们需要把窗口系统调整为X11才可以。 解决方法 修改配置文件&#xff0c;关闭wayland su…