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。

相关文章

Python函数的基本用法、返回值特性、全局变量修改及异常处理技巧

Python函数的基本用法、返回值特性、全局变量修改及异常处理技巧

《Python函数的基本用法、返回值特性、全局变量修改及异常处理技巧》本文将通过实际代码示例,深入讲解Python函数的基本用法、返回值特性、全局变量修改以及异常处理技巧,感兴趣的朋友跟随小编一起看看... 目录一、python函数定义与调用1.1 基本函数定义1.2 函数调用二、函数返回值详解2.1 有返
阅读更多...
Nginx屏蔽服务器名称与版本信息方式(源码级修改)

Nginx屏蔽服务器名称与版本信息方式(源码级修改)

《Nginx屏蔽服务器名称与版本信息方式(源码级修改)》本文详解如何通过源码修改Nginx1.25.4,移除Server响应头中的服务类型和版本信息,以增强安全性,需重新配置、编译、安装,升级时需重复... 目录一、背景与目的二、适用版本三、操作步骤修改源码文件四、后续操作提示五、注意事项六、总结一、背景与
阅读更多...
Python批量替换多个Word文档的多个关键字的方法

Python批量替换多个Word文档的多个关键字的方法

《Python批量替换多个Word文档的多个关键字的方法》有时,我们手头上有多个Excel或者Word文件,但是领导突然要求对某几个术语进行批量的修改,你是不是有要崩溃的感觉,所以本文给大家介绍了Py... 目录工具准备先梳理一下思路神奇代码来啦！代码详解激动人心的测试结语嘿，各位小伙伴们，大家好！有没有想
阅读更多...
Go语言使用select监听多个channel的示例详解

Go语言使用select监听多个channel的示例详解

《Go语言使用select监听多个channel的示例详解》本文将聚焦Go并发中的一个强力工具,select,这篇文章将通过实际案例学习如何优雅地监听多个Channel,实现多任务处理、超时控制和非阻... 目录一、前言：为什么要使用select二、实战目标三、案例代码：监听两个任务结果和超时四、运行示例五
阅读更多...
MySQL多实例管理如何在一台主机上运行多个mysql

MySQL多实例管理如何在一台主机上运行多个mysql

《MySQL多实例管理如何在一台主机上运行多个mysql》文章详解了在Linux主机上通过二进制方式安装MySQL多实例的步骤,涵盖端口配置、数据目录准备、初始化与启动流程,以及排错方法,适用于构建读... 目录一、什么是mysql多实例二、二进制方式安装MySQL1.获取二进制代码包2.安装基础依赖3.清
阅读更多...
JAVA中安装多个JDK的方法

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置（JAVA_HOME和Path）,并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk（需要登录Oracle账号，没有可以免费注册）下载完
阅读更多...
SQL Server修改数据库名及物理数据文件名操作步骤

SQL Server修改数据库名及物理数据文件名操作步骤

《SQLServer修改数据库名及物理数据文件名操作步骤》在SQLServer中重命名数据库是一个常见的操作,但需要确保用户具有足够的权限来执行此操作,：本文主要介绍SQLServer修改数据... 目录一、背景介绍二、操作步骤2.1 设置为单用户模式（断开连接）2.2 修改数据库名称2.3 查找逻辑文件名
阅读更多...
苹果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.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2