二次封装el-carousel

2024-04-24 17:12
文章标签 封装 el 二次 carousel

本文主要是介绍二次封装el-carousel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们创建了一个名为MyCarousel的组件，它接受el-carousel的一些常用属性作为props，并默认提供了一些值。我们还通过setup函数返回了所有props，以便它们可以在模板中被使用。

1.MyCarousel.vue组件

<!-- 轮播图片 -->
<template><div class="carousel" :class="[{ twoBox: isTwo }, { elseBox: !isTwo }]"><el-carouselloopindicator-position="outside"class="carouselBox":arrow="carouselListData.length === 1 ? 'never' : 'hover'"@change="changeItem"ref="carouse"><el-carousel-item:width="props.width + 'px'"v-for="(item, index) in carouselListData":key="index"@click="goHomepage(item)"><img:src="item.imageUrl":style="{width: props.widthImage + '%',height: props.heightImage + '%',cursor: item.posterLink || props.activeTab ? 'pointer' : ''}"alt="轮播图图片"/></el-carousel-item></el-carousel></div>
</template><!-- 轮播图 -->
<script setup lang="ts" name="CustomCarousel">import { QueryPosterInfoListOutput } from '@/api/home/types';import _ from 'lodash';const isTwo = ref(false); // 判断是不是两条数据const carouse = ref();const emit = defineEmits({ clickGoPage: null, changeItem: null });const props = defineProps({// 轮播图宽度width: {type: Number,default: 0},// 轮播图高度height: {type: String,default: '400'},type: {type: String,default: 'card'},// 相邻两张图片切换的间隔时间interval: {type: Number,default: 4000},//图片宽widthImage: {type: Number,default: 100},//图片高heightImage: {type: Number,default: 100},// 轮播图路径数组carouselList: {type: Array<QueryPosterInfoListOutput>,default: () => []},// 点击不同的tab切换对应的轮播图activeTab: {type: Number,default: 0}});const activeIndex = ref(0);const carouselListData = ref<QueryPosterInfoListOutput[]>([]);watch(() => props.carouselList,(newVal) => {fu(newVal);});// 针对阶梯套餐的特殊处理watch(() => props.activeTab,(newVal) => {// console.log(activeIndex.value, 'newVal======', newVal);// 因为是element-ui组件的一个bug两张图片的需要单独特殊处理，目的是避免切换tab的时候，轮播图切换到上一张，轮播方向错误if (isTwo.value) {// 上一个的tab值const prev = carouselListData.value[activeIndex.value];// 如果上一个的值和当前点击的的一样,不做改变if (prev.id === newVal) {return;} else {let index = _.findIndex(carouselListData.value, (item, i) => {return item.id === newVal && i > activeIndex.value;});// 如果是最后一张图的时候需要回来到第一张图片if (index === -1) {index = 0;}// 重新设置选中的默认值carouse.value.setActiveItem(index);}} else {const index = _.findIndex(carouselListData.value, (item) => {return item.id === newVal;});carouse.value.setActiveItem(index);}});// 点击进入链接，发起方法调用const goHomepage = (value: QueryPosterInfoListOutput) => {emit('clickGoPage', value);if (value.posterLink) {window.open(value.posterLink, '_blank');}};const changeItem = (val: any) => {const value = carouselListData.value[val];activeIndex.value = val;// console.log('index-----------', val);emit('changeItem', value);};onMounted(() => {fu(props.carouselList);});/*** 重新处理，el-carousel-item数量为2时，组件循环方向一左一右的问题** 思路：如果为2时，复制一次，使其成为长度length为4的数组，然后将Carousel组件的indicators(下标显示器)多复制的给隐藏（原本长度为2，现在为4，就隐藏第3个和第4个)* @param data*/const fu = (data: QueryPosterInfoListOutput[]) => {if (data) {if (data.length === 2) {isTwo.value = true;//将2条数据复制一份为4条数据carouselListData.value = data.concat(data);} else {isTwo.value = false;//其他时候正常赋值carouselListData.value = data;}}};
</script><style scoped lang="scss">.twoBox {width: 100%;height: 100%;.carouselBox {width: 100%;//将复制出来的数据的下标隐藏:deep(.el-carousel__indicators) {& > li:nth-child(3),& > li:nth-child(4) {display: none;}}}}.elseBox {width: 100%;height: 100%;.carouselBox {width: 100%;}}.carousel {:deep {.el-carousel__indicators--outside .is-active button {background-color: var(--el-color-primary);width: 20px;height: 3px;}.el-carousel__indicators--outside button {// background-color: #e1e1e1;width: 9px;}.el-carousel__arrow {background-color: #8b8b8b;}.el-carousel__arrow--left {left: 16.1%;opacity: 40%;}.el-carousel__arrow--right {right: 16.1%;opacity: 40%;}.el-carousel__arrow--right:active,.el-carousel__arrow--left:active {opacity: 80%;}.el-carousel__container {margin-bottom: 7px;position: relative;width: 100%;height: auto;// aspect-ratio: 1440/600img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}}}}
</style>

2.使用：

基础用法：

<template><my-carouselv-if="bannerImgsList.length":height="'582'":carouselList="bannerImgsList"@clickGoPage="clickGoPage"/>
</template><script setup lang="ts">
import { QueryPosterInfoListOutput } from '@/api/home/types';
const bannerImgsList = ref<QueryPosterInfoListOutput[]>([]);const clickGoPage = (value: IcarouselList) => {console.log('=====', value);// router.push("/home");
};
</script>

 需要结合tab来动态联动的用法：

<template><div class="step-package margin-top40" v-if="ladderPackageList && ladderPackageList.length"><!-- 切换的tab --><div class="flex-center margin-top20"><divv-for="item in ladderPackageList":key="item.id"class="step-package-tabs":class="{ 'step-package-tabs-active': activeTab == item.id }"><el-button class="img-button" @click="clickSelectTab(item)">{{ item.posterName }}</el-button></div></div><!-- 轮播图 --><div class="margin-top30 step-carousel"><my-carousel:height="'422'":width="1000":carouselList="ladderPackageList"@changeItem="changeItem"@clickGoPage="clickGoPage":activeTab="activeTab"/></div></div>
</template>
<script setup lang="ts">import { ref } from 'vue'import { useRouter } from 'vue-router';import { queryFrontLadderPackageFront } from '@/api/ladderPackage';import { QueryLadderPackageOutput } from '@/api/ladderPackage/types';const router = useRouter();const ladderPackageList = ref();const activeTab = ref<number>(0);onMounted(() => {getData ();});const getData = async () => {const result = await 接口;if (result && result.length) {ladderPackageList.value = result;activeTab.value = result[0].id;}};const clickSelectTab = (item: QueryLadderPackageOutput) => {activeTab.value = item.id;};const clickGoPage = (val: any) => {console.log('val', val);};const changeItem = (val: any) => {activeTab.value = val.id;};
</script>
<style lang="scss" scoped>.step-package {height: 100%;width: 100%;.step-package-content {width: 70%;margin: 0 auto;}.step-carousel {:deep {.el-carousel__container {aspect-ratio: 1440/420;}}}.step-package-tabs {margin: 0 3em;cursor: pointer;border-radius: 16px;.img-button {border: 0;border-radius: 16px;}}.step-package-tabs-active {margin: 0 3em;background-color: var(--el-color-primary);color: #fff;.img-button {background-color: var(--el-color-primary);border-color: var(--el-color-primary);color: #fff;}}}
</style>

3.效果图：

最后，同个点击上面的tab切换到不同的图片上，同理，切换不同的轮播图，上面的tab也会跟着动，双向的联动。 

这篇关于二次封装el-carousel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

el-select下拉选择缓存的实现

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景：问题描述解决方案：项目场景：从左侧列表中选取字段填入右侧下拉多选框，用户可以对右侧
阅读更多...
JavaSE——封装、继承和多态

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性：封装、继承、多态 。而类和对象阶段，主要研究的就是封装特性。何为封装呢？简单来说就是套壳屏蔽细节 。     比如：对于电脑这样一个复杂的设备，提供给用户的就只是：开关机、通过键盘输入，显示器， USB 插孔等，让用户来和计算机进行交互，完成日常事务。但实际上：电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
阅读更多...
哈希表的封装和位图

哈希表的封装和位图

文章目录 2 封装2.1 基础框架2.2 迭代器(1)2.3 迭代器(2) 3. 位图3.1 问题引入3.2 左移和右移？3.3 位图的实现3.4 位图的题目3.5 位图的应用 2 封装 2.1 基础框架 文章 有了前面map和set封装的经验，容易写出下面的代码 // UnorderedSet.h#pragma once#include "HashTable.h"
阅读更多...
封装MySQL操作时Where条件语句的组织

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中，条件语句应该是相对难以处理的，毕竟条件语句太过于多样性。 条件语句大致分为以下几种： 1、单一条件，比如：where id = 1; 2、多个条件，相互间关系统一。比如：where id > 10 and age > 20 and score < 60; 3、多个条件，相互间关系不统一。比如：where (id > 10 OR age > 20) AND sco
阅读更多...
vue2实践：el-table实现由用户自己控制行数的动态表格

vue2实践：el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单，如图： 当我点击添加时，便添加一行；点击右边的删除时，便删除这一行。 至少要有一行数据，但是没有上限。 思路 这种每一行的数据固定，但是不定行数的，很容易想到使用el-table来实现，它可以循环读取:data所绑定的数组，来生成行数据，不同的是： 1、table里面的每一个cell，需要放置一个input来支持用户编辑。 2、最后一列放置两个b
阅读更多...
一些数学经验总结——关于将原一元二次函数增加一些限制条件后最优结果的对比（主要针对公平关切相关的建模）

一些数学经验总结——关于将原一元二次函数增加一些限制条件后最优结果的对比（主要针对公平关切相关的建模）

1.没有分段的情况 原函数为一元二次凹函数（开口向下），如下： 因为要使得其存在正解，必须满足，那么。 上述函数的最优结果为：，。 对应的mathematica代码如下： Clear["Global`*"]f0[x_, a_, b_, c_, d_] := (a*x - b)*(d - c*x);(*(b c+a d)/(2 a c)*)Maximize[{f0[x, a, b,
阅读更多...
【线性代数】正定矩阵，二次型函数

【线性代数】正定矩阵，二次型函数

本文主要介绍正定矩阵，二次型函数，及其相关的解析证明过程和各个过程的可视化几何解释（深蓝色字体）。 非常喜欢清华大学张颢老师说过的一段话：如果你不能用可视化的方式看到事情的结果，那么你就很难对这个事情有认知，认知就是直觉，解析的东西可以让你理解，但未必能让你形成直觉，因为他太反直觉了。 正定矩阵 定义 给定一个大小为 n×n 的实对称矩阵 A ，若对于任意长度为 n 的非零向量 ，有 恒成
阅读更多...
Java封装构造方法

Java封装构造方法

private/public的分装 被public修饰的成员变量或者是成员方法，可以被类的调用对象直接使用 而private修饰的成员变量和方法，不能被类的调用对象使用 例如： 可以看到我们是不能在main方法中直接调用被private修饰的变量 当然我们可以在我们定义的TestMode类中可以定一个方法show，然后在调用show方法实现 这里我们可以清楚了解 private 不光可以修
阅读更多...
C++数据结构重要知识点（5）（哈希表、unordered_map和unordered_set封装）

C++数据结构重要知识点（5）（哈希表、unordered_map和unordered_set封装）

1.哈希思想和哈希表 （1）哈希思想和哈希表的区别 哈希（散列、hash）是一种映射思想，本质上是值和值建立映射关系，key-value就使用了这种思想。哈希表（散列表，数据结构），主要功能是值和存储位置建立映射关系，它通过key-value模型中的key来定位数组的下标，将value存进该位置。 哈希思想和哈希表数据结构这两个概念要分清，哈希是哈希表的核心思想。 （2）unordered
阅读更多...
OOP三个基本特征：封装、继承、多态

OOP三个基本特征：封装、继承、多态

OOP三个基本特征：封装、继承、多态 C++编程之—面向对象的三个基本特征 默认分类 2008-06-28 21:17:04 阅读12 评论1字号：大中小     面向对象的三个基本特征是：封装、继承、多态。     封装 封装最好理解了。封装是面向对象的特征之一，是对象和类概念的主要特性。   封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2