a62527776a / vue-floating-action-button

Floating Action Button for Vue based on Material Design
MIT License
170 stars 32 forks source link

iconType为iconfont时,activeIcon不起作用? #50

Open sleepyW opened 2 years ago

sleepyW commented 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>

image