这是我参与8月更文挑战的第24天,活动详情查看:8月更文挑战
Dropzone
是作者封装的图片上传组件,看一下源码
引用组件,提供上传的url,一个成功回调,一个失败回调,回调后弹一个message
看一下组件的实现吧,里面提供了很多其它的配置项,例如是否允许粘贴,最大数量什么的,
组件整体上是用一个div包裹input来实现的,写了一些样式。
mounted后new 一个 Dropzone把相应的属性配置上,然后调用init方法。
如果可以粘贴,给document添加一个监听器,监听粘贴事件。
然后是一堆回调方法,返回给父组件
destroyed的时候销毁掉监听器和组件
Sticky
是作者写的一个吸附到顶部的组件,当页面滚懂=动到一定位置的时候,会吸附在顶部。
组件在@/components/Sticky
示例中写了多个组件,来展示效果
上面的header中,用
<sticky :z-index="10" class-name="sub-navbar">
标签包裹需要的内容就可以了,别的不需要做出什么改变。
下面的components-container展示了一个滑动到一定位置,吸附到顶部的效果
可以看到它到这个位置后,脱离了自己原本的位置,浮动了起来。
在这个位置,用sticky标签包括了一个button,
sticky-top是200,即以下这个距离是200px,之后可以根据自己项目的需要,进行调整
组件的实现,简单的看一下主要接受了3个参数
然后通过一堆计算修改样式,添加删除监听器,实现了吸附在顶部的功能。