一个漂亮的Vue组件 Floating Action Button

36次阅读

共计 1001 个字符,预计需要花费 3 分钟才能阅读完成。

你是否临下班前接到开发一个 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、ESLintgit 项目地址 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

正文完
 0