search

a62527776a / vue-floating-action-button

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

可以使用本地图片么？ #11

Closed LongMaoC closed 4 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">
     <img src="http://ued.rr.tv/hqdefault (20).jpg" style="width: 100%;height: 100%;border-radius: 50%" /> // 会覆盖原有的icon配置
  </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>