element走马灯自动_vue Element UI走马灯组件重写
1、element ui走马灯组件 -- carousel
分析一波源代码:
carousel/src/main.vue 文件为 el-carousel文件主要功能
carousel/src/item.vue 文件为 el-carousel-item 功能
2、carousel/src/main.vue文件详解:
1)、左右button切换按钮
class="el-carousel__container"
:style="{ height: height }">
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">
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">
2)、横向tab切换
class="el-carousel__indicators"
v-if="indicatorPosition !== 'none'"
:class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
v-for="(item, index) in items"
class="el-carousel__indicator"
:class="{ 'is-active': index === activeIndex }"
@mouseenter="throttledIndicatorHover(index)"
@click.stop="handleIndicatorClick(index)">
{{ item.label }}
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;
},
element走马灯自动_vue Element UI走马灯组件重写相关推荐
- element table 单选按钮_vue + Element el-table表格里面使用单选radio按钮
今天再改bug的时候,孙子张口就来,便是一个需求,要在表格里面加单选radio按钮,将选中的数据内容传到另一页面展示. 顾名思义,只能单选某一条数据,于是就跑到element官网找路子,结果没有找到想 ...
- element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
- vue element ui 走马灯轮播图(简单几句话实现自动缩放效果)
实现效果 element ui 简单实现轮播图 本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
- element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
- element ui 多个子组件_vue前端UI框架,一点都不圆润,盘它!
面对众多vue前端UI框架,看着它们干干巴巴.麻麻赖赖的样子,一点都不圆润,跟我一起盘它! Vue移动端UI框架 1.Vux(star:15620) VUX(读音 [v'ju:z],同 views)是 ...
- Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
- element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
- 实战 | Element UI 父子组件传值与事件绑定(逆向)
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...
- 实战 | Element UI 父子组件传值与事件绑定(正向)
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...
最新文章
- DPDK pci设备初始化(十七)
- boost::iostreams::example::container_source用法的测试程序
- okhttp连接池_OkHttp配置HTTPS访问+服务器部署
- Js取float型小数点后两位数的方法
- php 获取设备,PHP获取设备类型实例代码
- android语法帮助手册_新 App 「捧读:日语语法学习与分析」的开发幕后思考
- 【C语言】1162: 循环移动(指针专题)(初识stdlib.h(malloc))
- MySQL日志设置双1_mysql日志配置文件示例
- windows版mysql添加远程访问
- shell逻辑运算符优先级_逻辑运算符有那些?
- 岁月的剪影【十二月一年之计始于此】
- springboot推送微信公众号消息,java推送微信公众号消息
- 奇偶性与魔术(一)——奇偶性的数学本质
- Java面向对象的知识(二)
- SS00011.elasticsearch——|HadoopElasticSearch集中式日志分析系统.v11|——|Elasticsearch.v11|
- 自动化测试工程师的发展前景怎么样?好不好?
- android java.lang.ClassNotFoundException但此类已存在
- eclipse中怎么快速切换窗口?
- Oracle性能优化专题
- 创维宽带猫E910V10C(电信)(酒店使用的那种)改桥接