Open sleepyW opened 2 years ago
<template> <vue-fab :mainBtnColor="mainBtnColor" class="floating-button" :icon="icon" :activeIcon="activeIcon" :scrollAutoHide="false" size="big" :iconType="iconType" :globalOptions="{spacing: 50,delay: 0.1}" :fabAutoHideAnimateModel="'alive'" > <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: "FloatingButton", data () { return { mainBtnColor: '#ffffff', iconType:'iconfont', icon:'fa fa-bars', activeIcon:'fa fa-times', hidden:false, menu: [ { icon: 'done', title: '首页', color: '#195bff', }, { icon: 'done', title: '个人中心', color: '#195bff', }, { icon: 'fa fa-user', title: '消息通知', color: '#195bff', }, ], } }, methods: { clickItem: function (item) { window.alert(item.idx) } } } </script> <style scoped> </style>