一个漂亮的Vue组件 Floating Action Butto
2018-02-28 本文已影响169人
坠入莱茵河
你是否临下班前接到开发一个FAB组件的需求？ 是否业务量巨大到加班还搞不定的情况下可恶的产品经理却还要求明天前开发一个高度自定义的FAB组件然后又对现有的组件不满意？ 又或者满意的组件使用的框架与现有业务不符？ 那么 如果你是Vue开发者且有FAB组件的需求，可以瞅瞅这个组件！
vue-float-action-button是一个美观、动画流畅、自定义内容丰富的一个Vue FAB组件
vue-float-action-button
常见功能
具有以下常用功能：
基本的自定义ICON、大小、背景色以及列表项中的标题
- icon大小分为 big(48px) small(32px) normal(40px) 子icon的大小为主icon的80%
- icon使用 Material Icons 根据readme.md操作 即可使用全部Material Icons
子菜单项的切换支持不同的动画模式.gif
- 子菜单项的切换支持两种动画模式 自由选择喜欢的动画模式
同样，主按钮的显示隐藏切换也支持多种动画模式.gif
- 两者的动画模式是独立的，您大可分别设置不同的动画组合
自定义动画曲线让您掌控全部.gif
菜单项切换动画同样支持自定义曲线.gif
- 如果您对动画曲线有特殊要求，可以使用贝塞尔曲线工具自定义您喜欢的贝塞尔曲线
- 与自定义动画模式一样 自定义动画曲线同样是独立的， 您大可单独设置动画曲线
支持手势自动隐藏.gif
支持滚动自动隐藏.gif
- 如果希望用户在上划或者网页向上滚动时的时候让FAB消失并且反过来显示，那么vue-float-action-button能满足你
- 为了更好的使用体验，在PC端和移动端的实现上有所不用 分别采用监听页面滚动(PC)和手指滑动(Mobile) 以达到优秀的用户体验
除以上之外 vue-float-action-button 还可以自定义
- 每个菜单项出现的延迟时间
- 手势/滚动自动隐藏的阈值
- 子菜单标题 样式
等 方便开发的各项API
安装 & 使用
vue-float-action-button的使用非常便捷 除了 Material Icons 外没有其他依赖
// 安装
$ yarn add vue-float-action-button
或
$ npm install vue-float-action-button
// 使用
// 在index.html的head里插入<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Example</title>
</head>
// main.js
import VueFab from 'vue-float-action-button'
Vue.use(VueFab)
// 需要使用的Vue文件中
<template>
<vue-fab
:menu="menu"
:mainBtnColor="mainBtnColor"
@clickItem="clickItem"
@clickMainBtn="clickMainBtn">
</template>
<script>
export default {
name: 'example',
data () {
return {
menu: [
{
key: 'done',
icon: 'done',
title: 'good job!',
color: '#ff9900'
},
{
key: 'toc',
icon: 'toc',
title: '',
color: '#999'
}
],
mainBtnColor: '#FF0099'
}
},
methods: {
clickItem: function (params) {
console.log('idx: ' + params.idx + ' key: ' + params.key)
}
clickMainBtn: function () {
console.log('clickMainBtn')
}
}
}
</script>
小结
vue-float-action-button 使用Vue开发 开发环境为Webpack、ESLint
git项目地址https://github.com/a62527776a/vue-fab/tree/master
在线预览地址为http://htmlpreview.github.io/?https://github.com/a62527776a/vue-fab/blob/master/demo/dist/index.html
欢迎大家试用、提供批评、意见以及PR Issue Star
