No.24 vue-element-admin 学习使用(十九)Dropzone图片上传, Sticky吸附顶部浮动

1,437 阅读1分钟

这是我参与8月更文挑战的第24天,活动详情查看:8月更文挑战

Dropzone

是作者封装的图片上传组件,看一下源码

引用组件,提供上传的url,一个成功回调,一个失败回调,回调后弹一个message

image.png

看一下组件的实现吧,里面提供了很多其它的配置项,例如是否允许粘贴,最大数量什么的, image.png

组件整体上是用一个div包裹input来实现的,写了一些样式。

mounted后new 一个 Dropzone把相应的属性配置上,然后调用init方法。

image.png 如果可以粘贴,给document添加一个监听器,监听粘贴事件。

然后是一堆回调方法,返回给父组件

image.png

destroyed的时候销毁掉监听器和组件

image.png

Sticky

是作者写的一个吸附到顶部的组件,当页面滚懂=动到一定位置的时候,会吸附在顶部。

组件在@/components/Sticky

image.png 示例中写了多个组件,来展示效果

上面的header中,用

<sticky :z-index="10" class-name="sub-navbar">

标签包裹需要的内容就可以了,别的不需要做出什么改变。

下面的components-container展示了一个滑动到一定位置,吸附到顶部的效果

image.png

可以看到它到这个位置后,脱离了自己原本的位置,浮动了起来。 在这个位置,用sticky标签包括了一个button, image.png

sticky-top是200,即以下这个距离是200px,之后可以根据自己项目的需要,进行调整

image.png

组件的实现,简单的看一下主要接受了3个参数

image.png

然后通过一堆计算修改样式,添加删除监听器,实现了吸附在顶部的功能。