uniapp扩展组件uni-fab的自定义图标

官方的uni-fab默认图标是一个“+”号，那如果我们需要自定义图标，怎么办呢？

网上的方法有两种思路：修改源码和样式覆盖。我这里主要讲一下修改源码的方式。

首先在uniapp官网下载uni-fab的组件源码到项目中。然后在路径

/uni_modules/uni-fab/components/uni-fab/uni-fab.vue

文件中<uni-icons>添加“：typle="icon"”

<uni-icons class="fab-circle-icon" custom-prefix="iconfont" :type="icon" :color="styles.iconColor" size="32":class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>

然后在73行的props里面添加icon属性

props: {
            icon:{
                type:String,
                default:'plusempty'
            }

}

在vue文件中使用

<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"@trigger="trigger" @fabClick="fabClick" icon="icon-bianji"/>

我还使用了阿里的图标库的图标，至于引用下载方式在uni-icons里面已经写的很清楚，我就不再赘述了。