HIPS-UNI-UI

# Indicator 指示器

# 使用指南

import Indicator from '@hips/uni-ui/lib/indicator/component';

export default {
  components: {
    'hips-indicator': Indicator,
  },
};
1
2
3
4
5
6
7

# 插件使用

import Indicator from '@hips/uni-ui/lib/indicator';

Vue.use(Indicator);
1
2
3

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-indicator v-model="show"></hips-indicator>
1
export default {
  data() {
    return {
      show: false,
    };
  },
};
1
2
3
4
5
6
7

# 修改样式

<hips-indicator v-model="show" color="red" size="16"></hips-indicator>
1

# 透明背景颜色

<hips-indicator v-model="show" color="red" pure></hips-indicator>
1

# 使用 ref 开启和关闭

<hips-cell title="打开" @click="openIndicator" />

<hips-indicator ref="hipsIndicator" message="3s后自动关闭"></hips-indicator>
1
2
3
export default {
  methods: {
    openIndicator() {
      this.$refs.hipsIndicator.open();
      setTimeout(() => {
        this.$refs.hipsIndicator.close();
      }, 3000);
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 插件方式开启和关闭

<hips-indicator id="hipsIndicator" />
1
this.$hips.indicator.open({ color: 'blue' });
this.$hips.indicator.close();
1
2

注意

  1. 插件使用需要手动引入插件的 template
// 页面引入
import Indicator from '@hips/uni-ui/lib/indicator/component';

export default {
  components: {
    'hips-indicator': Indicator,
  },
};

// main.js 全局引入
import Dialog from '@hips/uni-ui/lib/indicator/component';

Vue.component('hips-indicator', Indicator);
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 插件使用方法请务必在页面中添加 <hips-indicator/> 标签，并添加选择器。

# API

参数 说明 类型 可选值 默认值
value v-model 绑定，控制显示隐藏 Boolean - false
size spin size 属性 [Number, String] - 32
color spin 和消息字体颜色 String - white
svg-src spin svgSrc 属性 String - -
message 消息内容 String - -
pure 背景是否透明 Boolean - false

# Functions

名称 说明 参数
open 通过 ref 打开 -
close 通过 ref 关闭 -

# Slots

名称 说明
- 内容插槽

# 插件使用配置

# API

参数 说明 类型 可选值 默认值
size spin size 属性 [Number, String] - 32
color spin 和消息字体颜色 String - white
svgSrc spin svgSrc 属性 String - -
message 消息内容 String - -
pure 背景是否透明 Boolean - false
selector 选择器 String - #hipsIndicator
context 选择器的选择范围，可以传入自定义组件的 this 作为上下文 Object - 当前页面

# Functions

名称 说明 参数 类型
open 手动开启 - -
close 手动关闭 - -

提示

  • this.$hips.indicator.open({message: '提示'})

  • this.$hips.indicator.close()

# 样式变量

变量名 说明 默认值
indicator-wrapper-bg-color 容器背景颜色 rgba(0,0,0, 0.6)
indicator-wrapper-border-radius 容器边框弧度 20rpx
indicator-message-font-size 消息字体尺寸 24rpx

注意

Dialog 通知提示