vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录

vue3 element-ui-plus Carousel 跑马灯 的踩坑记录

  • Carousel 跑马灯
  • 首页跑马灯demo

Carousel 跑马灯

首先,打开其官网-跑马灯案例

在这里插入图片描述

跑马灯代码:

	<el-carousel :interval="5000" arrow="always"><el-carousel-item v-for="item in 4" :key="item"><h3 text="2xl" justify="center">{{ item }}</h3></el-carousel-item></el-carousel>

首页跑马灯demo

在这里插入图片描述

tips: vue3不再使用require函数导入,而是使用支持es6的import函数去导入

<scripe setup>import image1 from '@/assets/images/mrhb.jpg'import image2 from '@/assets/images/mrlm.jpg'import image3 from '@/assets/images/mrxtt.jpg'import image4 from '@/assets/images/zly.jpg'const bgList = ref([{url:image1},{url:image2},{url:image3},{url:image4}])
</scripe><template><el-carousel :interval="4000" indicator-position="outside" type="card"  height="450px" style="line-height: 450px;"><el-carousel-item v-for="item in bgList" :key="item"><!-- <h3 text="2xl" justify="center">{{ item.url }}</h3> --><el-image :src=" item.url " style="height: 450px;width: 100%;"></el-image></el-carousel-item></el-carousel>
<template>

我的踩坑记录就是明明,网页的资源文件已经渲染,但是无法看到图片,然后查了半天,最后发现是h3标签的那块儿内容占了位置将我的图片顶了下去,QAQ
(ಥ﹏ಥ),以后一定要相信自己的想法,坚持自己没错啊!!!

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

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

相关文章

python+pygame+opencv+gpt实现虚拟数字人直播(一)

AI技术突飞猛进&#xff0c;不断的改变着人们的工作和生活。数字人直播作为新兴形式&#xff0c;必将成为未来趋势&#xff0c;具有巨大的、广阔的、惊人的市场前景。它将不断融合创新技术和跨界合作&#xff0c;提供更具个性化和多样化的互动体验&#xff0c;成为未来的一种趋…

Linux 安全 - SUID机制

文章目录 一、文件权限位二、SUID简介 一、文件权限位 &#xff08;1&#xff09; $ ls -l text.txt -rw-rw-r-- 1 yl yl 0 Sep 28 16:25 text.txt其中第一个字段-rw-rw-r–&#xff0c;我们可以把它分为四部分看&#xff1a; -rw-rw-r--&#xff08;1&#xff09;- &a…

服务器文件备份

服务器上&#xff0c;做好跟应用程序有关的文件备份&#xff08;一般备份到远程的盘符&#xff09;&#xff0c;有助于当服务器发生硬件等故障时&#xff0c;可以对系统进行进行快速恢复。 下面以Windows服务器为例&#xff0c;记录如何做文件的备份操作。 具体操作如下&#…

如何在windows系统环境下使用tail命令查看日志

答案是&#xff1a; 使用tail for Windows工具 tail for Windows 是便携式软件不需要安装&#xff0c;它可用于显示文件的最后一行并跟踪/监视文件的更改。 下载地址&#xff1a; https://tail-for-windows.en.softonic.com/ 点击直接下载 解压使用 解压后需将tail.exe放入 c:…

day 10.4

服务器 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLine> #include <QTcpServer> #include <QTcpSocket> #include <QMessageBox>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Wid…

解决dockerfile创建镜像时pip install报错的bug

项目场景&#xff1a; 使用docker-compose创建django容器 问题描述 > [5/5] RUN /bin/bash -c source ~/.bashrc && python3 -m pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple: 0.954 Looking in indexes: https://…

Java判断字符串是否是有效的括号

给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需要满足&#xff1a; 左括号必须用相同类型的右括号闭合。例如&#xff1a;"[]","()","{}" 左括…

Folium笔记:HeatMap

在地图上生成热力图 0 举例 import folium from folium.plugins import HeatMap# 创建一个地图对象 m folium.Map(location(1.34084, 103.83637), zoom_start13)# 创建一个坐标点的数据集 data [(1.431656, 103.827896),(1.424789, 103.789902),(1.325781, 103.860446),(1.…

web漏洞-PHP反序列化

目录 PHP反序列化序列化反序列化原理涉及技术利用危害CTF靶场 PHP反序列化 序列化 将对象转换成字符串 反序列化 相反&#xff0c;将字符串转换成对象。 数据格式的转换对象的序列化有利于对象的保存和传输&#xff0c;也可以让多个文件共享对象。 原理 未对用户输入的序列化字…

C++面试题总结

C面试题总结 一、C基础二、类与继承、多态三、C11新特性 一、C基础 1. C和C的区别 1. C面向过程&#xff0c;C面向对象&#xff0c;所以C具有封装、继承、多态三大特性&#xff1b;&#xff08;多态的基础是封装和继承&#xff0c;即通过虚函数继承父类的方法&#xff0c;实现…

整理了197个经典SOTA模型,涵盖图像分类、目标检测、推荐系统等13个方向

今天来帮大家回顾一下计算机视觉、自然语言处理等热门研究领域的197个经典SOTA模型&#xff0c;涵盖了图像分类、图像生成、文本分类、强化学习、目标检测、推荐系统、语音识别等13个细分方向。建议大家收藏了慢慢看&#xff0c;下一篇顶会的idea这就来了~ 由于整理的SOTA模型…

JVM篇---第二篇

系列文章目录 文章目录 系列文章目录一、简述一下JVM的内存模型二、说说堆和栈的区别三、什么时候会触发FullGC一、简述一下JVM的内存模型 1.JVM内存模型简介 JVM定义了不同运行时数据区,他们是用来执行应用程序的。某些区域随着JVM启动及销毁,另外一 些区域的数据是线程性独…

23. 合并 K 个升序链表

给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(in…

用稳定扩散生成4K PBR纹理【SDXL】

我正在继续去年开始使用 Three.JS 构建 3D 场景和草图的工作。 当时&#xff0c;DALL-E 和 Stable Diffusion 等 AI 图像生成器刚刚真正起飞。 我成功地在本地运行稳定扩散&#xff0c;并使用它为我正在构建的 3D 世界中的地形、建筑物和其他环境生成纹理。 当时我使用的是稳…

Django、Nginx、uWSGI详解及配置示例

一、Django、Nginx、uWSGI的概念、联系与区别 Django、Nginx 和 uWSGI 都是用于构建和运行 Web 应用程序的软件&#xff0c;这三个软件的概念如下&#xff1a; Django&#xff1a;Django 是一个基于 Python 的开源 Web 框架&#xff0c;它提供了一套完整的工具和组件&#xf…

解决每次重启ganache虚拟环境,十个账号秘钥都会改变问题

很多时候 我们启动一个 ganache 环境 然后 通过私钥 在 MetaMask 中 导入用户 但是 当我们因为 电脑要关机呀 或者 ETH 消耗没了呀 那我们就不得不重启一个ganache虚拟环境 然后 你在切一下网络 让它刷新一下 你就会发现 上一次导入的用户就没有了 这是因为 你每次 ganache…

第2篇 机器学习基础 —(1)机器学习方式及分类、回归

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。机器学习是一种人工智能的分支&#xff0c;它使用算法和数学模型来使计算机系统能够从经验数据中学习和改进&#xff0c;而无需显式地编程。机器学习的目标是通过从数据中发现模式和规律&#xff0c;从而使计算机能够自动进…

React封装自定义表单校验方法

一、表单校验 为什么要封装自定义表单校验方法&#xff0c;因为在后台管理系统中&#xff0c;通常我们会涉及到用户的添加或则信息的修改&#xff0c;这时候通常就涉及表单的相关校验。但通常一个系统中的表单校验针对同一个字段来说是统一的。因此我们就需要将对应的校验字段的…

STM32复习笔记(五):FSMC连接外部SRAM

目录 Preface&#xff1a; &#xff08;一&#xff09;原理相关 &#xff08;二&#xff09;CUBEMX配置 &#xff08;三&#xff09;轮询方式读写 &#xff08;四&#xff09;DMA方式读写 Preface&#xff1a; STM32F4有一个FSMC&#xff08;Flexible Static Memory Contr…

侯捷 C++ STL标准库和泛型编程 —— 9 STL周围

最后一篇&#xff0c;完结辽&#xff01;&#x1f60b; 9 STL周围 9.1 万用Hash Function Hash Function的常规写法&#xff1a;其中 hash_val 就是万用Hash Function class CustumerHash { public:size_t operator()(const Customer& c) const{ return hash_val(c.fna…