资讯专栏INFORMATION COLUMN

一个漂亮的Vue组件 Floating Action Button

GT / 2729人阅读

摘要:你是否临下班前接到开发一个组件的需求是否业务量巨大到加班还搞不定的情况下可恶的产品经理却还要求明天前开发一个高度自定义的组件然后又对现有的组件不满意又或者满意的组件使用的框架与现有业务不符那么如果你是开发者且有组件的需求,可以瞅瞅这个组件完

你是否临下班前接到开发一个FAB组件的需求? 是否业务量巨大到加班还搞不定的情况下可恶的产品经理却还要求明天前开发一个高度自定义的FAB组件然后又对现有的组件不满意? 又或者满意的组件使用的框架与现有业务不符? 那么 如果你是Vue开发者且有FAB组件的需求,可以瞅瞅这个组件!  

完美支持阿里巴巴ICONFONT 以及 Material Icons 无需担忧额外依赖
项目地址 https://github.com/a62527776a...

vue-float-action-button是一个美观、动画流畅、自定义内容丰富的一个Vue FAB组件

常见功能

具有以下常用功能:

icon大小分为 big(48px) small(32px) normal(40px) 子icon的大小为主icon的80%

icon支持 Material Icons 以及 阿里巴巴ICONFONT 两种图标 根据readme.md操作 即可使用 Material Icons 或者iconfont

子菜单项的切换支持两种动画模式 自由选择喜欢的动画模式

两者的动画模式是独立的,您大可分别设置不同的动画组合

如果您对动画曲线有特殊要求,可以使用贝塞尔曲线工具自定义您喜欢的贝塞尔曲线

与自定义动画模式一样 自定义动画曲线同样是独立的, 您大可多带带设置动画曲线

如果希望用户在上划或者网页向上滚动时的时候让FAB消失并且反过来显示,那么vue-float-action-button能满足你

为了更好的使用体验,在PC端和移动端的实现上有所不用 分别采用监听页面滚动(PC)和手指滑动(Mobile) 以达到优秀的用户体验

除以上之外 vue-float-action-button 还可以自定义

每个菜单项出现的延迟时间

手势/滚动自动隐藏的阈值

子菜单标题 样式

等 方便开发的各项API

小结

vue-float-action-button 使用Vue开发 开发环境为Webpack、ESLint
git项目地址 https://github.com/a62527776a/vue-floating-action-button
在线预览地址为http://htmlpreview.github.io/...://github.com/a62527776a/vue-floating-action-button/blob/master/demo/dist/index.html
欢迎大家试用、提供批评、意见以及PR Issue Star

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103059.html

相关文章

  • Android — 个人简洁记账本项目开发日志

    摘要:官方的设计规范文档基于此找到在上的项目,完全符合的设计标准。该项目已经被收录。现在四个按钮分别为账目图表类别我的。的具体使用方法可以或百度了解,在这个需求下使用的子类结合其模式就可以轻松实现,并得到修改后的对象。 一期项目计划 记账软件最准确的使用方式,是在花费后立即记账,所以应用需要考虑单手操作下可以快捷地开始记账操作,比如在右下角放置 floating button 来实现,并在...

    YJNldm 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<