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。

相关文章

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

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

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

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中，并且长按图标也不会出现删除符号，下面解决这个问... 在 MACOS 上，Launchpad（也就是「启动台」）是一个便捷的 App 启动工具。但有时候，应
阅读更多...
Python实现无痛修改第三方库源码的方法详解

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很
阅读更多...
基于Flask框架添加多个AI模型的API并进行交互

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》：本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应
阅读更多...
Linux修改pip和conda缓存路径的几种方法

Linux修改pip和conda缓存路径的几种方法

《Linux修改pip和conda缓存路径的几种方法》在Python生态中,pip和conda是两种常见的软件包管理工具,它们在安装、更新和卸载软件包时都会使用缓存来提高效率,适当地修改它们的缓存路径... 目录一、pip 和 conda 的缓存机制1. pip 的缓存机制默认缓存路径2. conda 的缓
阅读更多...
Linux修改pip临时目录方法的详解

Linux修改pip临时目录方法的详解

《Linux修改pip临时目录方法的详解》在Linux系统中,pip在安装Python包时会使用临时目录（TMPDIR）,但默认的临时目录可能会受到存储空间不足或权限问题的影响,所以本文将详细介绍如何... 目录引言一、为什么要修改 pip 的临时目录？1. 解决存储空间不足的问题2. 解决权限问题3. 提
阅读更多...
Python实现合并与拆分多个PDF文档中的指定页

Python实现合并与拆分多个PDF文档中的指定页

《Python实现合并与拆分多个PDF文档中的指定页》这篇文章主要为大家详细介绍了如何使用Python实现将多个PDF文档中的指定页合并生成新的PDF以及拆分PDF,感兴趣的小伙伴可以参考一下... 安装所需要的库pip install PyPDF2 -i https://pypi.tuna.tsingh
阅读更多...
Linux文件名修改方法大全

Linux文件名修改方法大全

《Linux文件名修改方法大全》在Linux系统中,文件名修改是一个常见且重要的操作,文件名修改可以更好地管理文件和文件夹,使其更具可读性和有序性,本文将介绍三种在Linux系统下常用的文件名修改方法... 目录一、引言二、使用mv命令修改文件名三、使用rename命令修改文件名四、mv命令和rename命
阅读更多...
mybatis-plus 实现查询表名动态修改的示例代码

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu
阅读更多...
Linux下修改hostname的三种实现方式

Linux下修改hostname的三种实现方式

《Linux下修改hostname的三种实现方式》：本文主要介绍Linux下修改hostname的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下修改ho编程stname三种方式方法1：修改配置文件方法2：hFvEWEostnamectl命
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2