Narcoleptic Possum Mob

    vue-float-action-button

    0.7.9 • Public • Published

    Vue Floating Action Button

    a beautiful Floating Action Button
    支持iconfont以及material icons

    Monthly downloads 5.8 kB min+gzip License

    Coverage Status

    Demo

    homepage and document

    English Doc

    demo代码

    8.gif

    7.gif


    Features

    • 支持多种动画
    • 支持滚动/手势自动显示/隐藏
    • 支持Material Design ICON
    • 支持阿里巴巴iconfont.cn
    • 支持点击空白处自动隐藏
    • 动画流畅复刻Material Design
    • 0依赖 体积小 min + gzip打包后 仅5.8KB

    Installation and use

    $ yarn add vue-float-action-button
    $ npm install vue-float-action-button
    
    import App from './App.vue'
    import VueFab from 'vue-float-action-button'
    import Vue from 'vue'
    
    Vue.use(VueFab, /* {
      ----------------------
      // opitons 可选iconfont图标或MaterialIcons
      iconType: 'MaterialDesign'
      // iconType: 'iconfont'
    } */)
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    

    本组件支持两种图标 一种为 Material Design 的图标 需要在网页中引入

    // index.html
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    
    // App.vue
    <vue-fab mainBtnColor="#3599DB">
      <fab-item @clickItem="clickItem" :idx="0" title="add" icon="add" />
      <fab-item @clickItem="clickItem" :idx="1" title="https" icon="https" />
      <fab-item @clickItem="clickItem" :idx="2" title="edit" icon="edit" />
    </vue-fab>
    
    

    所有ICON皆可从 https://material.io/icons/ 中查找

    如使用阿里巴巴矢量图标库 https://www.iconfont.cn 则按提示引入

    <vue-fab icon="icon-jia" 
      fabItemAnimate="default" 
      mainBtnColor="#16C2C2">
      <fab-item @clickItem="clickBABA" icon="icon-Rxing" :idx="0" title="iconfont.cn">
      </fab-item>
      <fab-item @clickItem="clickBABA" icon="icon-huanyihuan1" :idx="1" title="交换">
      </fab-item>
      <fab-item @clickItem="clickBABA" icon="icon-fangda1" :idx="2" title="聚焦">
      </fab-item>
    </vue-fab>
    

    Vue-Fab在底层已抹平两者使用区别 引入后仅需使用icon属性传入即可


    Examples

    <template>
    <vue-fab
      :mainBtnColor="mainBtnColor">
      <fab-item 
        v-for="(item, idx) in menu"
        :idx="idx"
        :title="item.title"
        :color="item.color"
        :icon="item.icon"
        @clickItem="clickItem" />
    </vue-fab>
    </template>
    
    <script>
      export default {
        name: 'example',
        data () {
          return {
            menu: [
              {
                icon: 'done',
                title: 'good job!',
                color: '#ff9900'
              },
              {
                icon: 'toc',
                title: '',
                color: '#999'
              }
            ],
            mainBtnColor: '#3eaf7c'
          }
        },
        methods: {
          clickItem: function (item) {
            window.alert(item.idx)
          }
        }
      }
    </script>
    
    

    API

    options

    Option Type Params Description
    iconType String 'MaterialDesign'/'iconfont' 根据您的使用习惯或开发依赖来决定使用哪种图标
    Vue.use(VueFab, /* {
      ----------------------
      // opitons 可选iconfont图标或MaterialIcons
      iconType: 'MaterialDesign'
      // iconType: 'iconfont'
    } */)
    

    vue-fab API

    Props

    Option Type Default Params Description
    iconType String 'MaterialDesign' 'MaterialDesign'/'iconfont' 根据您的使用习惯或开发依赖来决定使用哪种图标
    autoHideDirection String 'up' 'up' / 'down' 滚动自动隐藏的方向控制,默认值up为向下展示向上隐藏down值为向上展示向下隐藏
    unfoldDirection String 'up' 'up' / 'down' 展开方向,向上或者向下
    icon String 'add' / 未激活的icon
    activeIcon String 'add' / 激活后的icon
    size String 'Normal' 'big' / 'normal' / 'small' 主Fab的尺寸 子菜单会随之变化
    mainBtnColor String '#E64C3B' / 主按钮颜色
    hidden Boolean true true / false 是否隐藏Fab
    fabAnimateBezier String linear 'ease' / 'linear' / 'ease-in' / 'ease-out' / 'ease-in-out' / '.18,.89,.91,.17' 主按钮显示消失(hidden)的贝塞尔曲线 如填入贝塞尔曲线 直接填入'n,n,n,n'或'liner'
    z-index Number 5 / fab的层级
    shadow Boolean true true / false 主button的阴影
    clickAutoClose Boolean true true / false 点击子菜单项后是否关闭菜单
    scrollAutoHide Boolean true true / false 滚动是否触发自动隐藏 (PC端和Mobile端实现方式有所不同 分别根据scroll事件和touchmove事件实现)
    autoHideThreshold Number 10 / 滚动触发自动隐藏的阈值 单位px
    fabAutoHideAnimateModel String 'alive' 'default' / 'alive' fab滚动触发自动隐藏动画 分为 'default' ( 缩小隐藏 ) 以及 'alive' (向下滚动隐藏)
    fabItemAnimate String 'default' 'default' / 'alive' 打开关闭子菜单时过渡动画 分为 'default' (各自过渡) 'alive' (分裂过渡)
    fabAliveAnimateBezier String' '.16,1.01,.61,1.2' 'ease' / 'linear' / 'ease-in' / 'ease-out' / 'ease-in-out' / '.18,.89,.91,.17' 子菜单列表在alive动画模式下的贝塞尔曲线 注:仅fabMenuAnimate为alive时生效
    globalOptions Object {spacing: 40, delay: 0.05} / 每个fab-item的动画延迟和间距
    • delay: 菜单项淡入淡出的延迟差 为上一个菜单项加该延迟的延迟(单位 s) (fabItemAnimate为alive情况下该值会自动 除以 3)
    • spacing 每个菜单项的间距 单位 px

    Methods

    Name Param Type Default Description
    onOffFab True / False Boolean True 显示或者隐藏Fab

    fab-item API

    Props

    Option Type Default Params Description
    idx Number 0 / 下标 决定了位置以及clickItem事件返回的值(必须)
    title String '' / 菜单项标题 如果不填 将不显示title框
    icon String 'add' / Submenu item icon Supports [Material Icon] (https://material.io/icons/) and iconfont icon
    color String '#FFF' / 支持css颜色标准 默认为白色 不填写该值将自动拥有一个值为0px 2px 8px #666的阴影
    titleColor String #666 / 子菜单标题字体颜色
    titleBgColor String #FFF / 子菜单背景颜色

    Event

    Name Param Description
    clickItem {idx} 当菜单项不为空且点击菜单项时,会返回该菜单项传入的idx值

    注意

    • 由于safari浏览器的事件传递机制 window、document、body 不响应click事件** 如若出现点击空白区域无法自动关闭子菜单的情况 请检查html高度是否100% 如果没有100% 请单独给html标签设置css属性 min-height: 100% 项目对safari浏览器做了单独处理 在safari浏览器中将点击事件挂载在了HTML标签上,除iOS系统外的浏览器挂载在window上

    LICENSE

    MIT

    Install

    npm i vue-float-action-button

    DownloadsWeekly Downloads

    522

    Version

    0.7.9

    License

    ISC

    Unpacked Size

    827 kB

    Total Files

    71

    Last publish

    Collaborators

    • a62527776a