heihu-uni-components v1.2.9

安装指南

通过 npm 安装

npm install heihu-uni-components

配置

引用样式，在 uni.scss 中添加:

@import "heihu-uni-components/src/assets/styles/export/index.css";

配置组件自动引用（easycom 组件模式），在 pages.json 中：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      // 添加这行
      "^hh-(.*)": "heihu-uni-components/components/hh-$1/hh-$1.vue"
    }
  }
}

活动倒计时组件（hh-promo-counter）

基本用法

<template>
  <hh-promo-counter
    class="counter"
    v-model="time"
    title="恭喜参加新人专享礼"
    desc="买多久再送多久"
    @finish="onFinish"
  />
</template>

<script>
import Vue from "vue";

export default {
  data() {
    return {
      time: 10000,
    };
  },
  methods: {
    onFinish() {
      console.log("结束");
    },
  },
};
</script>

属性

事件

css 变量（修改方法请查看组件样式修改）

评分组件

基本用法

<template>
  <hh-rating v-model="currRating" />
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      /** 当前评分（即选中了多少颗星） */
      currRating: 0,
    };
  },
};
</script>

属性

事件

css 变量（修改方法请查看组件样式修改）

评分弹框组件

基本用法

<template>
  <hh-rating-modal
    v-model="show"
    :topImgSrc="topImgSrc"
    title="测试评分弹框"
    content="测试评分弹框: 这是弹框内容，加长长长长长长长长长长长长长长长长长长一点"
    @submit="submit"
  />
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      /** 是否显示评分弹框 */
      show: true,
      /** 顶部图片，也可以是 `url` */
      topImgSrc: require("../../static/rating-rate-svgrepo-com2.png"),
    };
  },
  method: {
    submit(rating) {
        console.log("用户给的评分（即给了多少颗星）")
    }
  }
</script>

属性

事件

css 变量（修改方法请查看组件样式修改）

组件样式修改

修改方法

在 配置章节 中引入的css文件（@import "heihu-uni-components/src/assets/styles/export/index.css";）中有所有组件的 css 变量，可以通过在引用该文件之后的地方修改对应的样式：

• 在非 css 选择器中修改，如在 uni.scss 中修改（在此处修改将作用于所有使用到对应变量的组件）：

/* 配置中引入的代码 */
@import "heihu-uni-components/src/assets/styles/export/index.css";
/* 修改变量: */
:root {
  /* 修改所有弹框相关组件遮罩颜色 */
  --hh-mask-bg: rgba(0, 0, 0, 0.3);
}

• 在 css 选择器中修改，如在组件的 class 下修改（只影响该组件），以 评分弹框组件 为例:

<template>
  <hh-rating-modal class="rating-modal" ... />
</template>
<script>
// .....
</script>
<style>
.rating-modal {
  /* 修改评分弹框背景 */
  --hh-rating-modal-bg: #ffffff;
  /* 修改评分弹框顶部图片宽度 */
  --hh-rating-modal-img-width: 200rpx;
  /* 修改评分弹框顶部图片高度 */
  --hh-rating-modal-img-height: 200rpx;
}
</style>

• 通过 >>>（css 中使用）、::v-deep（scss 中使用）或 :deep()（vue3 中使用）修改对应样式

全局 css 变量