vue通知(滚动)

1. li宽度不顾定

<template><div id="app"><div id="box" @mouseover="clearLeft" @mouseleave="setLeft"><ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist"><li v-for="(item,index) in items" :key="index">{{item.name}}</li></ul></div></div>
</template><script>
export default {name: "HelloWorld",data() {return {timer: null,pwidth: 0,left: 0,items: [{name: "1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云",active: false},{name: "2雷dfgd军",active: false},{name: "3dsfgd张珊",active: false}]};},mounted() {this.setLeft();},watch: {},methods: {setLeft() {let element = this.$refs.cmdlist;this.pwidth = document.defaultView.getComputedStyle(element, "").width.split("px");this.timer = setInterval(() => {this.left--;let num = parseInt(this.pwidth[0]);if (-num >= this.left) {console.log("this.left", this.left);console.log("-num", -num);this.left = 0;}}, 30);},clearLeft() {if (this.timer) clearInterval(this.timer);}},beforeDestroy() {if (this.timer) clearInterval(this.timer);}
};
</script>
<style scoped>
* {margin: 0;padding: 0;
}
#app {margin-top: 60px;margin-left: 200px;text-align: center;
}
#box {width: 600px;height: 50px;overflow: hidden;border: 1px solid #090;
}
ul {padding: 0px;margin: 0px;display: flex;/* width: 320px; */height: 50px;border: 1px solid #f00;
}
li {list-style: none;padding: 0px;margin: 0px;/* padding-right: 30px; */background: #099;white-space: nowrap;
}
</style>

box宽度100%会有问题

2. li宽度固定

<template><div id="app"><div id="box" @mouseover="clearLeft" @mouseleave="setLeft"><ul :style="{ transform: 'translateX(' + left + 'px)' }" ref="cmdlist"><li v-for="(item,index) in items" :key="index">{{item.name}}</li></ul></div></div>
</template><script>
export default {name: "HelloWorld",data() {return {timer: null,pwidth: 0,left: 0,items: [{name: "1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云1马dfgdfgs云",active: false},{name: "2雷dfgd军",active: false},{name: "3dsfgd张珊",active: false}]};},mounted() {this.setLeft();},watch: {},methods: {setLeft() {let num = this.items.length * 230;this.timer = setInterval(() => {this.left--;if (-num >= this.left) {console.log("this.left", this.left);console.log("-num", -num);this.left = 0;}}, 30);},clearLeft() {if (this.timer) clearInterval(this.timer);}},beforeDestroy() {if (this.timer) clearInterval(this.timer);}
};
</script>
<style scoped>
* {margin: 0;padding: 0;
}
#app {margin-top: 60px;margin-left: 200px;text-align: center;
}
#box {/* width: 600px; */height: 50px;overflow: hidden;border: 1px solid #090;
}
ul {display: inline-block;padding: 0px;margin: 0px;display: flex;/* width: 320px; */height: 50px;border: 1px solid #f00;
}
li {width: 200px;padding: 0px;margin: 0px 30px 0px 0px;list-style: none;background: #099;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
</style>

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

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

相关文章

前后端小项目链接

1.vue的创建 vue的项目创建 1.1 vue create vue_name 1.2 Babel Router(路由) CSS Pre-processors 路由可通过&#xff1a;npm i vue-router3.5.2 -S 下载 1.3less 1.4 In dedicated config files 1.5 启动命令&#xff1a;npm run serve 端口号在vue.config。js中配置 devS…

454. 四数相加 II

题目描述 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&#xff1a;nums…

SpringCloud链路追踪——Spring Cloud Sleuth 和 Zipkin 介绍 Windows 下使用初步

前言 在微服务中&#xff0c;随着服务越来越多&#xff0c;对调用链的分析越来越复杂。如何能够分析调用链&#xff0c;定位微服务中的调用瓶颈&#xff0c;并对其进行解决。 本篇博客介绍springCloud中用到的链路追踪的组件&#xff0c;Spring Cloud Sleuth和Zipkin&#xf…

使用 PyAudio、语音识别、pyttsx3 和 SerpApi 构建简单的基于 CLI 的语音助手

德米特里祖布☀️ 一、介绍 正如您从标题中看到的&#xff0c;这是一个演示项目&#xff0c;显示了一个非常基本的语音助手脚本&#xff0c;可以根据 Google 搜索结果在终端中回答您的问题。 您可以在 GitHub 存储库中找到完整代码&#xff1a;dimitryzub/serpapi-demo-project…

Git的安装

前置 知道自己电脑上跑的是什么系统 查看电脑位数 省事的一种办法 Windows 在cmd中输入如下命令 wmic os get osarchitecture看命令结果即可 省事的一种办法 Linux 直接在终端中输入如下命令 uname -m若结果是x86_64就是64位的&#xff0c;反之32位 图形化的办法 Wind…

在Mac上安装和配置Node.js

在Mac上安装和配置Node.js是一项相对简单但重要的任务。Node.js是一个开源的、跨平台的JavaScript运行时环境&#xff0c;用于构建高效、可扩展的网络应用程序。下面将详细介绍如何在Mac上安装和配置Node.js。 准备工作 在安装配置Node.js之前&#xff0c;你需要确保你的Mac已…

开箱即用的Appimage是什么以及如何建立快捷方式

1 引言 在使用Linux系统过程中&#xff0c;初学者会遇到无穷多的问题&#xff0c;包括软件的安装问题。 ubuntu的deb,centos的rpm, 当然以及需要解压的tar.gz等等。有一种开箱即用的软件安装类型&#xff0c;格式为Appimage。 AppImage 的官方网站是 AppImage | Linux apps tha…

文件打包下载excel导出和word导出

0.文件下载接口 请求 GET /pm/prj/menu/whsj/download/{affixId} 文件affixId多个id以逗号隔开。多个文件会以打包得形式。 1.Excel导出 1.0接口 POST 127.0.0.1:8400/pm/io/exportExcel/year-plan-table-workflow/report 参数 [{"org":"011","re…

docker更新容器映射端口

一个容器已经暴露了一个端口被外界使用&#xff0c;但是这个端口被公司不允许使用&#xff0c;需要修改为其他的端口&#xff0c;怎么办&#xff1f; 1、删除原容器&#xff0c;重启新容器 删除已启动容器&#xff0c;从镜像重启新容器。2、修改原容器配置文件 3、生成镜像&…

Selenium定向爬取PubMed生物医学摘要信息

本文主要是自己的在线代码笔记。在生物医学本体Ontology构建过程中,我使用Selenium定向爬取生物医学PubMed数据库的内容。 PubMed是一个免费的搜寻引擎,提供生物医学方面的论文搜寻以及摘要。它的数据库来源为MEDLINE(生物医学数据库),其核心主题为医学,但亦包括…

java8 Optional理解及示例

大量判空的代码 实际中&#xff0c;对象不判空会导致空指针异常。 为了规避为指针&#xff0c;不得不写出这种非常冗长又丑陋的空指针判断。 public void tooMuchNull(Worker worker) {if (worker ! null) {Address addressworker.getAddress();if (address ! null) {String…

react-router-dom v6版本实现Tabs路由缓存切换

目录 文章目录 概要 效果 完整代码 概要 摆了半年摊&#xff0c;好久没写代码了&#xff0c;今天有人问我怎么实现React-Router-dom类似标签页缓存。后面看了一下router的官网。很久以前用的是react-router v5那个比较容易实现。v6变化挺大&#xff0c;但了解react的机制和rea…

Android一些新的技术栈,你都会哪些?

Jetpack Compose&#xff1a; Jetpack Compose是一种全新的声明式UI框架&#xff0c;用于构建Android应用的用户界面。它使UI开发更加简单和直观&#xff0c;通过使用Kotlin语言来创建交互式和动态的UI组件。 Kotlin Multiplatform&#xff1a; Kotlin Multiplatform允许开发者…

uniapp检测新版本

一、代码 在app.vue中写入 Update() {const updateManager uni.getUpdateManager();console.log(版本,updateManager,uni.getSystemInfoSync());updateManager.onCheckForUpdate(function(res) {// 请求完新版本信息的回调console.log(版本更新, res);});updateManager.onUpd…

2023年【北京市安全员-A证】考试报名及北京市安全员-A证考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 北京市安全员-A证考试报名根据新北京市安全员-A证考试大纲要求&#xff0c;安全生产模拟考试一点通将北京市安全员-A证模拟考试试题进行汇编&#xff0c;组成一套北京市安全员-A证全真模拟考试试题&#xff0c;学员可…

粗糙集知识约简的python代码

看到不少人给我留言关于粗糙集的问题&#xff0c; 由于以前代码写的时间太长了&#xff0c;而且过于简化&#xff0c;我都忘了自己怎么写的了&#xff0c;我就没有每个人都回应。 现在更新新版的粗糙集代码 知识约简也相当简单&#xff0c;只要调用RoughSets.cores就可以看到哪…

【LeetCode】59. 螺旋矩阵 II

1 问题 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 2&#xff1a; 输入&#xff1a;n…

windows 11 安装PHP8.2

环境说明 windows:windows 11 x64apache: Apache/2.4.43php :php-8.2.11 一.php 1、PHP下载 PHP For Windows: Binaries and sources Releases 注意&#xff1a; 1.要下载Thread Safe&#xff0c;否则没有php8apache2_4.dll这个文件&#xff1b;如果使用Apache作为服务器…

SpringSecurity+ Oauth2.0+JWT 0-1

这里写目录标题 准备工作准备SQL添加用户添加依赖准备UserInfoUserMapperUserServiceUserServiceImpl配置SpringDataUserDetailsService 授权服务器&#xff1a;AuthorizationServer配置客户端详细信息管理令牌定义TokenConfig定义AuthorizationServerTokenServices 令牌访问端…

k8s 实战 常见异常事件 event 及解决方案分享

k8s 实战 常见异常事件 event 及解决方案分享 集群相关 Coredns容器或local-dns容器 重启集群中的coredns组件发生重启(重新创建)&#xff0c;一般是由于coredns组件压力较大导致oom&#xff0c;请检查业务是否异常&#xff0c;是否存在应用容器无法解析域名的异常。如果是l…