search

a62527776a / vue-floating-action-button

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

支持自定义Fab-item元素就好了 #9

Closed shuiRong closed 4 years ago

shuiRong commented 5 years ago

这样我可以塞一些图片和文字进去

a62527776a commented 4 years ago

https://a62527776a.github.io/customitem.html 现在fab-item支持slot插槽 可以在fab-item中插入自定义元素 需要配置好元素宽高以及圆角border-radius

<vue-fab icon="add" size="normal" >
  <fab-item @clickItem="clickItem" :idx="0" icon="edit">
  </fab-item>
  <fab-item @clickItem="clickItem" :idx="1" icon="edit">
    <img src="http://ued.rr.tv/hqdefault (20).jpg" style="width: 100%;height: 100%;border-radius: 50%" />
  </fab-item>
  <fab-item @clickItem="clickItem" :idx="2" icon="edit">
    <img src="http://ued.rr.tv/hqdefault (4).jpg"  style="width: 100%;height: 100%;border-radius: 50%" />
  </fab-item>
  <fab-item @clickItem="clickItem" :idx="3" title="自定义图标，得自己配置好border-radius以及width,height" icon="edit">
    <img src="http://ued.rr.tv/0.96058651790303660.png"  style="width: 100%;height: 100%;border-radius: 50%" />
  </fab-item>
</vue-fab>