Element.ui
Element.ui使用记录
你好像很好吃a
吃不了自律的苦,就要吃平庸的苦。
展开
-
Element.ui 【走马灯】实现item和对应的文字一起轮播、点击互相切换
Element.ui实现在走马灯组件外部自定义和item对应的配套文字,并一起轮播,当点击文字时对应的item轮播到当前位置,而点击item时对应的文字也相应的被选中。1、如下图所示,点击了儿童咨询时对应的儿童咨询轮播图正好轮播到,而当我们点击下面其他的item时上面对应的文字也会响应的选中。2、实现思路:item对应文字处理:定义一个变量carouseId记录正在轮播的item的对应id,并循环判断所有item是否和carouseId相等,相等则是正在轮播对应的item,修改样式即可,在每个文字原创 2020-09-10 15:16:45 · 9091 阅读 · 2 评论 -
Element.ui【走马灯】实现用手指可以左右滑动
1、element.ui实现用手可以左右滑动(或上下滑动),看了一下官网没有提供这样的功能,上网上查了一些资源也没有看到,后来想着换插件太麻烦了,决定手写一个。2、思路:为走马灯的item容器做一个监听事件,监听并获取到手指落点位置的X坐标startPoint(也就是距离屏幕左侧的距离),再获取到手指滑动后终点的X坐标stopPoint(抬起点距离屏幕左侧的距离),然后进行判断,如果两个点X坐标的距离相同即startPoint - stopPoint = 0,那么说明滑动的起点和终点X坐标距离左侧是相同原创 2020-09-10 14:34:42 · 8367 阅读 · 20 评论 -
Element.ui【走马灯】card模式下,实现每个item有间距不重叠
1、前阶段有需求,要求走马灯card模式下item不重叠,去网上找了很多没有实现的,后来决定自己写一个方法实现,见效果:间距的话可以自己根据需求调整:2、实现思路:走马灯为我们提供了一个change方法,该方法当幻灯片切换时触发,回调参数是目前激活的幻灯片的索引,原幻灯片的索引,我们可以通过该方法获取到当前索引,now为当前item索引,old为轮播上一个item的索引。我们通过观察上图走马灯item的结构可以发现,其实它的item标签位置是固定的,也就是说我们在循环的时候,赋值给标签的id属性也原创 2020-09-10 12:11:28 · 7024 阅读 · 7 评论 -
Element.ui 【走马灯】点击组件后停止轮播,点击其它位置续播
1、实现思路:走马灯有一个autoplay属性,决定轮播图是否自定切换,值为boolean,默认为true,很显然,当我们点击了内部的组件时,我们可以通过将该属性的值改为false让其停止轮播,当点击非走马灯组件时,修改其值为true即可。2、实现过程:为组件添加autoplay属性,并将值赋值为autoplay变量。在Vue的data中声明该变量,默认赋值为true(自动轮播)。在轮播图的容器上添加click.stop方法stopAuto,点击后停止轮播(注意要防止冒泡事件)。在该页面的Vue原创 2020-09-10 11:22:56 · 5271 阅读 · 0 评论 -
Element.ui 【走马灯】根据屏幕的宽高自适应大小
1、首先贴出element.ui走马灯组件的class,可以直接赋值修改:(如果有内联样式记得用!important)/* 走马灯每个item */.el-carousel__item{}/* 走马灯item的容器 */.el-carousel__container{}/* 整个走马灯的容器,包含指示器等其它组件在内 */.el-carousel{}2、走马灯动态适应屏幕的宽高:(具体细节可以根据需求自己调整)1)首先修改item的宽:.el-carousel__item{ wid原创 2020-09-10 10:41:28 · 10266 阅读 · 1 评论 -
Element.ui CDN形式引入组件库
1、通过CDN的形式加载语言文件:【官网提供的】<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>而使用官网引入以后响应速度不是很快,后原创 2020-09-10 10:07:27 · 2306 阅读 · 0 评论