更新记录

1.0.0（2023-07-14） 下载此版本

• 第一次版本提交

平台兼容性

功能图标组件

组件名：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

注：徽标使用uview-ui 的徽标组件，相关api可参考uview-ui 文档，可自行修改组件徽标

Events