vue 判断是否位 float_一个漂亮的Vue组件 Floating Action Button

43d77c7a1c2ac68d6fed58860eb4ae26.png
你是否临下班前接到开发一个FAB组件的需求? 是否业务量巨大到加班还搞不定的情况下可恶的产品经理却还要求明天前开发一个高度自定义的FAB组件然后又对现有的组件不满意? 又或者满意的组件使用的框架与现有业务不符? 那么 如果你是Vue开发者且有FAB组件的需求,可以瞅瞅这个组件!
完美支持阿里巴巴ICONFONT 以及 Material Icons 无需担忧额外依赖
在线预览地址为 https:// dscsdoj.top/public/vue- fab/index.html
git项目地址 a62527776a/vue-floating-action-button

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

d6cdeab030f306f7f5e088ae8df1bfef.gif

常见功能


具有以下常用功能:

e97459257d7c4972dcff869c3f49d6f6.png

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

Icons - Material Design​material.io
fb3fc1c0cabead39d95d8ae8732c6ed2.png

以及

Iconfont-阿里巴巴矢量图标库​www.iconfont.cn

两种图标 根据readme.md操作 即可使用 Material Icons 或者iconfont

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

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

286865b2e86fdfdebd80ca370b9fde21.gif

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

b9fc1fb68e79496037348978936f76bb.gif

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

除以上之外 vue-float-action-button 还可以自定义
1. 每个菜单项出现的延迟时间
2. 手势/滚动自动隐藏的阈值
3. 子菜单标题 样式
等 方便开发的各项API


小结

vue-float-action-button 使用Vue开发 开发环境为Webpack、ESLint
git项目地址

a62527776a/vue-floating-action-button


在线预览地址为

vue-fab


欢迎大家试用、提供批评、意见以及PR Issue Star

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值