更新记录
1.0.0(2023-07-14)
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
功能图标组件
组件名:h-function-icon
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
基本用法
在 template
中使用组件
<!-- 基本使用 -->
<h-function-icon></h-function-icon>
<!-- 自定义图标 -->
<h-function-icon icon="h-biaozhi"></h-function-icon>
<!-- 自定义图标大小 -->
<h-function-icon iconSize="30rpx"></h-function-icon>
<!-- 自定义图标颜色 -->
<h-function-icon iconColor="#30b6a2" ></h-function-icon>
<!-- 自定义背景颜色 -->
<h-function-icon background="#30b6a2"></h-function-icon>
<!-- 自定义背景宽度 -->
<h-function-icon width="160rpx"></h-function-icon>
<!-- 自定义背景高度 -->
<h-function-icon height="160rpx"></h-function-icon>
<!-- 自定义背景圆角 -->
<h-function-icon borderRadius="40rpx"></h-function-icon>
<!-- 自定义微标 -->
<h-function-icon :badge="66"></h-function-icon>
<!-- 是否开启背景渐变色 -->
<h-function-icon :gradients="false"></h-function-icon>
<!-- 是否开启背景阴影 -->
<h-function-icon :boxShadow="false"></h-function-icon>
<!-- 是否开启装饰 -->
<h-function-icon :decorate="false"></h-function-icon>
依赖
因使用了uview-ui 的 微标,所以需要引用
在 根目录下的 App.vue 文件中引入
<style lang="scss">
@import "@/uni_modules/uview-ui/index.scss";
</style>
在 根目录下的 main.js 文件中引入
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
uni.$u.config.unit = 'rpx'
在 根目录下的 uni.scss 文件中引入
@import '@/uni_modules/uview-ui/theme.scss';
组件中图标使用了自己的h-icon 组件,小程序不支持网络链接,使用时需要下载自己的图标库,使用本地地址;h-icon文档链接:https://ext.dcloud.net.cn/plugin?id=13216
API
Props
属性名 |
类型 |
默认值 |
说明 |
id |
String |
- |
功能图标id |
icon |
String |
h-biaoti |
矢量图标代码 |
iconSize |
String |
50rpx |
图标大小 |
iconColor |
String |
#fff |
图标颜色 |
width |
String |
100rpx |
背景宽度 |
height |
String |
100rpx |
背景高度 |
background |
String |
#e64758 |
背景颜色 |
gradients |
Boolean |
true |
是否开启背景渐变色 |
boxShadow |
Boolean |
true |
是否开启背景阴影 |
decorate |
Boolean |
true |
是否开启装饰 |
borderRadius |
String |
20rpx |
背景圆角 |
badge |
Number |
0 |
微标(为0时将不显示徽标) |
注:徽标使用uview-ui 的徽标组件,相关api可参考uview-ui 文档,可自行修改组件徽标
Events
事件名 |
类型 |
回调参数 |
说明 |
active |
function |
id(功能图标传入的id) |
功能图标点击事件 |