[转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482
1、element ui走马灯组件 -- carousel
分析一波源代码:
carousel/src/main.vue 文件为 el-carousel文件主要功能
carousel/src/item.vue 文件为 el-carousel-item 功能
2、carousel/src/main.vue文件详解:
1)、左右button切换按钮
<div
class="el-carousel__container"
:style="{ height: height }">
<transition name="carousel-arrow-left">
<button
type="button"
v-if="arrow !== 'never'"
v-show="arrow === 'always' || hover"
@mouseenter="handleButtonEnter('left')"
@mouseleave="handleButtonLeave"
@click.stop="throttledArrowClick(activeIndex - 1)"
class="el-carousel__arrow el-carousel__arrow--left">
<i class="el-icon-arrow-left"></i>
</button>
</transition>
<transition name="carousel-arrow-right">
<button
type="button"
v-if="arrow !== 'never'"
v-show="arrow === 'always' || hover"
@mouseenter="handleButtonEnter('right')"
@mouseleave="handleButtonLeave"
@click.stop="throttledArrowClick(activeIndex + 1)"
class="el-carousel__arrow el-carousel__arrow--right">
<i class="el-icon-arrow-right"></i>
</button>
</transition>
<slot></slot>
</div>
2)、横向tab切换
<ul
class="el-carousel__indicators"
v-if="indicatorPosition !== 'none'"
:class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
<li
v-for="(item, index) in items"
class="el-carousel__indicator"
:class="{ 'is-active': index === activeIndex }"
@mouseenter="throttledIndicatorHover(index)"
@click.stop="handleIndicatorClick(index)">
<button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
</li>
</ul>
3)关联child ElCarouselItem组件的方式
如:我将我的子组件命名为MyElCarouselItem 则为如下
updateItems() {
this.items = this.options.name === 'MyElCarouselItem');
}
3、carousel/src/item.vue 文件详解:
1)计算每个CarouselItem 的translate 距离
calculateTranslate(index, activeIndex, parentWidth) {
if (this.inStage) {
return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
} else if (index < activeIndex) {
return -(1 + CARD_SCALE) * parentWidth / 4;
} else {
return (3 + CARD_SCALE) * parentWidth / 4;
}
}
2)CarouselItem 的大小样式确定 以及滚动距离样式确定 translate、scale值
translateItem(index, activeIndex, oldIndex) {
const parentWidth = this.el.offsetWidth;
const length = this.parent.type !== 'card' && oldIndex !== undefined) {
this.animating = index === activeIndex || index === oldIndex;
}
if (index !== activeIndex && length > 2) {
index = this.processIndex(index, activeIndex, length);
}
if (this.$parent.type === 'card') {
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
this.active = index === activeIndex;
this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
this.scale = this.active ? 1 : CARD_SCALE;
} else {
this.active = index === activeIndex;
this.translate = parentWidth * (index - activeIndex);
}
this.ready = true;
}
4、个人修改实现5个card展示在前,不全屏展示的效果
12.png
1)各card的大小缩小比率
const CARD_SCALE = 0.9; // 中心Card的左右两边的第一个card大小缩小比例
const CARD_SCALE_diff_second = 0.1; //中心Card的左右两边的第二个card大小缩小比例 与中心Card的左右两边的第一个card大小缩小比例差值 ,即中心Card的左右两边的第二个card大小缩小比例为:CARD_SCALE - CARD_SCALE_diff_second
2)、计算5个card的移动距离 ,以下写法超过5个会出现切换视觉效果不佳问题
calculateTranslate(index, activeIndex, parentWidth,cardWidth) {
const diff = (parentWidth-(1 + 2 * CARD_SCALE + 2* (CARD_SCALE - CARD_SCALE_diff_second)) * cardWidth)/2
if (this.inStage) {
if(Math.abs(index - activeIndex) <2){
return diff + ((index - activeIndex +2) *(0 + CARD_SCALE )- CARD_SCALE_diff_second) * cardWidth ;
}else if(index - activeIndex <= -2){
return diff ;
}
return diff + (4 * CARD_SCALE - 2 * CARD_SCALE_diff_second ) * cardWidth;
}
//方式一:
// else if (index < activeIndex) {
// return -parentWidth;
// } else {
// return parentWidth + (diff + (4 * CARD_SCALE - 2 * CARD_SCALE_diff_second ) * cardWidth);
// }
return diff + (2 * CARD_SCALE - CARD_SCALE_diff_second) * cardWidth;
},
3)、计算translate
translateItem(index, activeIndex, oldIndex) {
const parentWidth = this.el.offsetWidth;
const length = this.el.offsetWidth;
if (this.parent.type === 'card') {
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 3;
this.active = index === activeIndex;
this.translate = this.calculateTranslate(index, activeIndex, parentWidth,cardWidth);
this.scale = this.active ? 1 : (Math.abs(index - activeIndex) >= 2)? (CARD_SCALE -CARD_SCALE_diff_second ) : (CARD_SCALE);
this.outCard = (Math.abs(index - activeIndex) >= 2)? true : false;
} else {
this.active = index === activeIndex;
this.translate = parentWidth * (index - activeIndex);
}
this.ready = true;
},
[转]vue Element UI走马灯组件重写的更多相关文章
- vue+element UI以组件递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
随机推荐
- 【Ray Tracing The Next Week 超详解】 光线追踪2-2
Chapter 2:Bounding Volume Hierarchies 今天我们来讲层次包围盒,乍一看比较难,篇幅也多,但是咱们一步一步来,相信大家应该都能听懂 BVH 和 Perlin text ...
- 2019 B类
警察 非警察
- BZOJ.1396.识别子串(后缀自动机/后缀数组 线段树)
题目链接 SAM:能成为识别子串的只有那些|right|=1的节点代表的串. 设这个节点对应原串的右端点为r[i],则如果|right[i]|=1,即\(s[\ [r_i-len_i+1,r_i-le ...
- WAP2.0(XHTML MP)基础介绍
(一)XHTML MP 介绍XHTML MP(eXtensible HyperText Markup Language Mobile Profile)WAP2.0与WCSS(WAP CSS /WAP ...
- IBDAP-CMSIS-DAP
IBDAP-CMSIS-DAP Armstart's CMSIS-DAP firmware implementation in gcc and makefile. http://www.armstar ...
- C# MD5 32位加密 UTF-8编码
项目开发过程中需要用到MD5加密,最开始的使用使用加密方法: public static string GetMD5(string str) { byte[] b ...
- Ubuntu使用安装或者卸载软件!!!
安装软件: 1.在应用商店里面下载安装 2.在终端sudo apt-get install 软件名 3.使用ppa:加入一个ppa源:sudo add-apt-repository ppa:user/ ...
- Revit MEP API找到连接器连接的连接器
通过conn.AllRefs;可以找到与之连接的连接器. //连接器连接的连接器 [TransactionAttribute(Autodesk.Revit.Attributes.Transaction ...
- .NET 开源Protobuf-net从入门到精通
<.NET 开源Protobuf-net从入门到精通>课程包含以下两个部分: 一..NET 开源Protobuf-net组件[数据存储篇] 本次分享课程包含以下干货知识点: 1.什么是Pr ...
- 自定义一个可以被序列化的泛型Dictionary<TKey,TValue>集合
Dictionary是一个键值类型的集合.它有点像数组,但Dictionary的键可以是任何类型,内部使用Hash Table存储键和值.本篇自定义一个类型安全的泛型Dictionary<TKe ...