博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个漂亮的Vue组件 Floating Action Button
阅读量:6869 次
发布时间:2019-06-26

本文共 885 字,大约阅读时间需要 2 分钟。

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

完美支持阿里巴巴ICONFONT 以及 Material Icons 无需担忧额外依赖 在线预览地址为 git项目地址

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

#常见功能


具有以下常用功能:

  • icon大小分为 big(48px) small(32px) normal(40px) 子icon的大小为主icon的80%
  • icon支持 以及 两种图标 根据readme.md操作 即可使用 Material Icons 或者iconfont

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

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

  • 如果您对动画曲线有特殊要求,可以使用自定义您喜欢的贝塞尔曲线
  • 与自定义动画模式一样 自定义动画曲线同样是独立的, 您大可单独设置动画曲线

  • 如果希望用户在上划或者网页向上滚动时的时候让FAB消失并且反过来显示,那么vue-float-action-button能满足你
  • 为了更好的使用体验,在PC端和移动端的实现上有所不用 分别采用监听页面滚动(PC)和手指滑动(Mobile) 以达到优秀的用户体验

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

  1. 每个菜单项出现的延迟时间
  2. 手势/滚动自动隐藏的阈值
  3. 子菜单标题 样式 等 方便开发的各项API

小结

vue-float-action-button 使用Vue开发 开发环境为Webpack、ESLint git项目地址 在线预览地址为 欢迎大家试用、提供批评、意见以及PR Issue Star

转载于:https://juejin.im/post/5c98b925f265da60ef635650

你可能感兴趣的文章
z-index
查看>>
git 和github
查看>>
Vue的路由
查看>>
RESTful API
查看>>
Vue.js随笔四(方法的声明和使用)
查看>>
第八周编程总结
查看>>
Linux进程笔记
查看>>
期末设计(十三周)
查看>>
delete多个值
查看>>
php gettext
查看>>
PHP计算每月几周,每周的开始结束日期
查看>>
RabbitMQ 安装 rabbitmq_delayed_message_exchange插件
查看>>
谈谈.NET中常见的内存泄露问题——GC、委托事件和弱引用
查看>>
【原创】NVIC中断
查看>>
实验 4 [bx]和loop的使用
查看>>
第三课 json的格式
查看>>
Hive安装与配置(靠谱亲测)
查看>>
hdu 1272 小希的迷宫
查看>>
线性动态规划基础
查看>>
HNOI2004 宠物收养所 解题报告
查看>>