前端组件
文章平均质量分 55
叁柒柒
这个作者很懒,什么都没留下…
展开
-
图片懒加载的vue指令实现方式
图片懒加载在日常开发过程中经常会使用到,一般情况下的实现思路是先判断图片是否出现在页面内,然后替换图片的src属性从而控制图片的加载。这一思路比较简单,但是每次使用时都需要重复计算图片的距离页面高度,比较繁杂,这一次通过Vue的自定义指令实现图片懒加载,只需要在需要图片需要懒加载时将src改为对应的指令即可,使用非常方便。 具体使用方式: <img class="img" v-lazyload="imgSrc" alt=""> 此处主要应用的Vue的Vue.directive功能,实现了一个l原创 2021-06-28 18:44:57 · 250 阅读 · 0 评论 -
Vue实现一个简单的瀑布流组件(包含图片懒加载功能)
日常业务需求中经常会使用到瀑布流布局,在实现瀑布流布局时,总体上的思路是:将页面等分为一定的列数,计算出最短的一列,然后将需要放入的元素放入最短的一列中,重复以上步骤,直到最后将所有元素放入列中。 总体来数,瀑布流布局的计算步骤比较复杂,同时还需要考虑上拉刷新等情况,为了减少重复的工作量,可以创建一个瀑布流的组件,后续在开发时只需要关注每一个元素的布局,而无需考虑瀑布流的实现,从而大大的减少工作量。 实现效果: 组件使用示例 // 引入组件 import waterfall from '@com/wate原创 2021-06-25 17:33:57 · 2509 阅读 · 0 评论 -
Vue.extend实现一个提示toast插件
日常开发中经常会使用到提示信息框,例如:接口调用失败需告知失败信息,用户点击加入购物车需告知用户加入成功等。若每次单独写,则非常繁琐,且没必要。因为此功能和页面整体的耦合性不强,因此可以单独拿出来做一个插件。 因为此插件可以挂载到Vue的原型上,可以十分方便的使用: // 使用示例 this.$toast.info('this is a message', 3000) 使用效果: 由于这个提示框和页面并不耦合,因此可以将其提取出来,新建一个.vue文件,主要用于创建一个组件,确定布局,样式等。 toast原创 2021-01-13 18:15:24 · 339 阅读 · 0 评论 -
VUE实现锚点组件
通过Vue实现一个组件,此组件的实现效果如下。 此组件分为横向和纵向两个部分,横向和纵向都由数量相同的item组成。点击横向部分的item,横向部分吸顶,此item被选中,移动到中间,同时纵向部分对应的item滚动到视野中的最高点。同时页面滚动时,纵向部分滚动到哪一个item,横向部分对应的item被选中,且位于居中位置。 组件位置:https://github.com/377-dsq/ddcom/blob/master/src/components/scrollTab.vue 实例页面:https://原创 2021-01-12 16:03:34 · 1106 阅读 · 0 评论 -
Vue实现swiper轮播组件
目前市面上有很多轮播组件,但是有的不满足业务需求,因此也需要自己首先轮播组件。以下是一个用vue实现的轮播组件,带动画效果,可以自行设置轮播速度,选择是否需要分页器等。效果如下: 思路: 结构:一个轮播组件应该由三部分组成,一是轮播的元素,如图片等;二是底部的分页器;三是前一张,后一张的按钮; 轮播实现:外层元素有固定的宽度,形成一个展示窗口,内层的轮播元素排列在窗口后面,定时移动内层元素,从而实现轮播。 注意点:当内层元素不断向左移动到达最后一个元素后,下一次移动需要将最后一个元素移动到第一个元素,原创 2020-10-18 12:00:36 · 4270 阅读 · 1 评论