el-carousel一屏放多个盒子和修改图标

2023-10-19 12:10
文章标签 多个 修改 el 图标 盒子 一屏 carousel

本文主要是介绍el-carousel一屏放多个盒子和修改图标，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

el-carousel一屏放多个盒子和修改图标

一排3个

在这里插入图片描述

      <el-carousel:loop="false":interval="3000"arrow="never"indicator-position="outside"ref="newCarousel"><el-carousel-item v-for="item in newsArr" :key="item.index"><div class="newsList"><divclass="news_body"v-for="el in item":key="el.id"><p class="date">{{ `${el.time.split("-")[1]}.${el.time.split("-")[2]}` }}</p><p class="year">{{ el.time.split("-")[0].split("：")[1] }}</p><div class="imgBox"><img:src="el.content[0].img"alt=""width="100%"height="100%"/></div><h3>{{ el.title }}</h3><p class="text">{{ el.title }}</p></div></div></el-carousel-item><div class="carouselArrow"><div class="prev" @click="prev('newCarousel')"><div class="dark"></div><div class="light"></div></div><div class="prev" @click="next('newCarousel')"><div class="dark"></div><div class="light"></div></div></div></el-carousel>

数据 new.js

const newsData = [{id: "n001",type: "公司新闻",title:"您的文本，请定制内容！",subTitle:"阅读次数：899次",time: "发布时间：2020-03-20",content: [{text: "123",img: "/imgs/n001.jpg",title: "123",},{text: "123",img: "/imgs/n002.jpg",title: "123",},],},{id: "n002",type: "您的文本，请定制内容！",title: "您的文本，请定制内容！",subTitle:"阅读次数：899次",time: "发布时间：2020-03-20",content: [{text: "456",img: "/imgs/n015.jpg",title: "456",},],},{id: "n003",type: "您的文本，请定制内容！",title: "您的文本，请定制内容！",subTitle:"阅读次数：899次",time: "发布时间：2020-03-20",content: [{text: "您的文本，请定制内容！",img: "",title: "",},{text: "您的文本，请定制内容！？",img: "",title: "",},{text: "您的文本，请定制内容！",img: "/imgs/n003.jpg",title: "您的文本，请定制内容！",},{text: "您的文本，请定制内容！",img: "",title: "",},{text: "您的文本，请定制内容！",img: "/imgs/n004.jpg",title: "您的文本，请定制内容！",},{text: "",img: "/imgs/n005.jpg",title: "您的文本，请定制内容！",},{text: "",img: "/imgs/n006.jpg",title: "您的文本，请定制内容！",},{text: "",img: "/imgs/n007.jpg",title: "您的文本，请定制内容！",},{text: "您的文本，请定制内容！",img: "",title: "",},{text: "",img: "/imgs/n008.jpg",title: "您的文本，请定制内容！",},{text: "您的文本，请定制内容！",img: "/imgs/n009.jpg",title: "您的文本，请定制内容！",},{text: "您的文本，请定制内容！",img: "/imgs/n010.jpg",title: "您的文本，请定制内容！",},{text: "您的文本，请定制内容！。",img: "",title: "",},{text: "您的文本，请定制内容！",img: "",title: "",},{text: "您的文本，请定制内容！",img: "",title: "",},],},
]

import newsData from "../static/news.js";
newsArr: [],

  created() {this.goNewsRound();},

方法

    // 走马灯数据处理goNewsRound() {this.newsArr = newsData.sort((a, b) => {return a.time > b.time ? -1 : 1;});this.newsArr = this.common(this.newsArr, 3);},common(arr, num) {let newDataList = [];let current = 0;if (arr && arr.length > 0) {for (let i = 0; i < arr.length; i++) {if(i !=0 && i % num == 0) {current ++;}if (!newDataList[current]) {newDataList.push([arr[i]]);} else {newDataList[current].push(arr[i]);}}}return [...newDataList];},// 上一页prev(dom) {this.$refs[dom].prev();},// 下一页next(dom) {this.$refs[dom].next();},

两行两列(注意：需要两行两列时需要盒子定宽，flex布局可换行，处理数据时换成4条数据放一个数组)
在这里插入图片描述

      <el-carousel:loop="false":interval="3000"arrow="never"indicator-position="outside"ref="proCarousel"><el-carousel-item v-for="item in product" :key="item.index"><div class="detailList"><div v-for="el in item" :key="el.id"><div class="detailItem"><div class="detailImg first"></div><div class="detailText"><div class="textTitle">{{ el.fath }}</div><div class="detailInfo">{{ el.fath }}</div><div class="detailInfo more" >MORE ></div></div></div></div></div></el-carousel-item><div class="carouselArrow"><div class="prev" @click="prev('proCarousel')"><div class="dark"></div><div class="light"></div></div><div class="prev" @click="next('proCarousel')"><div class="dark"></div><div class="light"></div></div></div></el-carousel>

样式

  .detailList {width: 100%;margin-top: 30px;display: flex;justify-content: space-between;flex-wrap: wrap;.detailItem {// box-sizing: border-box;cursor: pointer;display: flex;// width: 48%;width: 585px;height: 192px;margin-bottom: 40px;// margin-bottom: 30px;border: 3px solid #fff;&:hover {// box-sizing: border-box;border: 3px solid #00468c;.detailText {.textTitle {color: #fff;}.detailInfo {color: #fff;}.more {color: #fff;}background-color: #00468c;}}.detailImg {width: 192px;// width: 295px;// height: 220px;height: 192px;&.first {background: url("../assets/imgs/bd.png");background-size: 100% 100%;}&.second {background: url("../assets/imgs/heliportBeacon.png") no-repeat;background-size: 100% 100%;}&.thrid {background: url("../../public/imgs/p038-02.jpg") no-repeat;background-size: 100% 100%;}&.fourth {background: url("../assets/imgs/zsjqjxlxt.jpg") no-repeat;background-size: 100% 100%;}}.detailText {box-sizing: border-box;width: calc(100% - 192px);height: 192px;padding-left: 30px;padding-right: 38px;.textTitle {font-size: 24px;margin-top: 28px;color: #1b3646;font-family: Medium;}.detailInfo {font-size: 16px;margin: 20px 0px 30px 0px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;color: #646a73;font-family: Normal;text-align: justify;}.more {font-size: 18px;color: #003f85;font-family: Medium;}}}}

import proData from "../static/product";created() {this.goProductRound();

    goProductRound() {this.product = this.common(proData,4)},// 上一页prev(dom) {this.$refs[dom].prev();},// 下一页next(dom) {this.$refs[dom].next();},

const proData = [{id: 'p001',order:1,dept: '您的文本，请定制内容！',fath:'您的文本，请定制内容！',img:'../assets/imgs/ty1.png',title:'您的文本，请定制内容！',msg: "",class:"day",content:[{xbt:'',xnr:'您的文本，请定制内容！',imgArr:[{imgOne:'/imgs/p001-01.jpg',style:'width:53%;',type:'middle',},{imgOne:'/imgs/p001-02.jpg',style:'width:46%',type:'middle'},{imgOne:'/imgs/p001-03.jpg',style:'width:100%;margin-top:2%',type:'big'}]}]},{id: 'p002',order:2,dept: '您的文本，请定制内容！',fath:'航空应急救援装备',img:'../assets/imgs/hkyjjy.jpg',title:'您的文本，请定制内容！',msg: "",class:"managementSystem",content:[{xbt:'',xnr:'您的文本，请定制内容！',imgArr:[{imgOne:'/imgs/p002-01.jpg',style:'width:80%;margin:0 auto 2%',type:'big'},{imgOne:'/imgs/p002-02.jpg',style:'width:49.6%;',type:'middle',},{imgOne:'/imgs/p002-03.jpg',style:'width:49.6%',type:'middle'}]}]},{id: 'p003',order:3,dept: '您的文本，请定制内容！',fath:'航空应急救援装备',img:'../assets/imgs/hkyjjyzb.jpg',title:"您的文本，请定制内容！",msg: "",class:"rescue",content:[{xbt:'',xnr:'您的文本，请定制内容！。',imgArr:[{imgOne:'/imgs/p003-11.jpg',style:'width:49.6%',type:'middle'},{imgOne:'/imgs/p003-22.jpg',style:'width:49.6%;',type:'middle',},{imgOne:'/imgs/p003-03.jpg',style:'width:49.6%',type:'middle'},{imgOne:'/imgs/p003-44.jpg',style:'width:49.6%',type:'middle'}]}]},{id: 'p004',order:4,dept: '您的文本，请定制内容！',fath:'航空应急救援装备',img:'../assets/imgs/ty.jpg',title: "您的文本，请定制内容！",msg: "",class:"medical",content:[{xbt:'',xnr:您的文本，请定制内容！',imgArr:[{imgOne:'/imgs/p004-01.jpg',style:'width:63.7%',type:'middle'},{imgOne:'/imgs/p004-02.jpg',style:'width:35.7%;',type:'middle',}]}]},
]

这篇关于el-carousel一屏放多个盒子和修改图标的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/239665。

相关文章

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面，macOS26采用了全新的玻璃质感视觉风格，应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日（6 月 13 日）发布博文，报道称在 macOS 26 Tahoe 中
阅读更多...
使用jenv工具管理多个JDK版本的方法步骤

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,：本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的？二、jenv的核心功能（一）管理多个Java版本（二）支持插件扩展（三）环境隔
阅读更多...
Oracle修改端口号之后无法启动的解决方案

Oracle修改端口号之后无法启动的解决方案

《Oracle修改端口号之后无法启动的解决方案》Oracle数据库更改端口后出现监听器无法启动的问题确实较为常见,但并非必然发生,这一问题通常源于​​配置错误或环境冲突​​,而非端口修改本身,以下是系... 目录一、问题根源分析​​​二、保姆级解决方案​​​​步骤1：修正监听器配置文件 (listener.
阅读更多...
Linux中修改Apache HTTP Server(httpd)默认端口的完整指南

Linux中修改Apache HTTP Server(httpd)默认端口的完整指南

《Linux中修改ApacheHTTPServer(httpd)默认端口的完整指南》ApacheHTTPServer（简称httpd）是Linux系统中最常用的Web服务器之一,本文将详细介绍如何... 目录一、修改 httpd 默认端口的步骤1. 查找 httpd 配置文件路径2. 编辑配置文件3. 保存
阅读更多...
Python函数返回多个值的多种方法小结

Python函数返回多个值的多种方法小结

《Python函数返回多个值的多种方法小结》在Python中,函数通常用于封装一段代码,使其可以重复调用,有时,我们希望一个函数能够返回多个值,Python提供了几种不同的方法来实现这一点,需要的朋友... 目录一、使用元组（Tuple）:二、使用列表（list）三、使用字典（Dictionary）四、 使
阅读更多...
Nginx 413修改上传文件大小限制的方法详解

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1
阅读更多...
Python对PDF书签进行添加,修改提取和删除操作

Python对PDF书签进行添加,修改提取和删除操作

《Python对PDF书签进行添加,修改提取和删除操作》PDF书签是PDF文件中的导航工具,通常包含一个标题和一个跳转位置,本教程将详细介绍如何使用Python对PDF文件中的书签进行操作... 目录简介使用工具python 向 PDF 添加书签添加书签添加嵌套书签Python 修改 PDF 书签Pytho
阅读更多...
Java中Switch Case多个条件处理方法举例

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,：本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1：合并相同代码的多个case示例2：通过字符串合并多个case进阶用法使用
阅读更多...
Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

《Docker镜像修改hosts及dockerfile修改hosts文件的实现方式》：本文主要介绍Docker镜像修改hosts及dockerfile修改hosts文件的实现方式,具有很好的参考价... 目录docker镜像修改hosts及dockerfile修改hosts文件准备 dockerfile 文
阅读更多...
Java编译生成多个.class文件的原理和作用

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类（常规内部类）局部内部类（方法内部类）匿名内部类二、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2