HIPS-UNI-UI

# Notify 通知提示

# 使用指南

# 组件使用

import Notify from '@hips/uni-ui/lib/notify/component';

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

# 插件使用

import Notify from '@hips/uni-ui/lib/notify';

Vue.use(Notify);
1
2
3

# 跨平台支持

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

# 代码演示

# 基础用法

<hips-notify v-model="show" message="这是一条消息" />
1
export default {
  data() {
    return {
      show: false,
    };
  },
};
1
2
3
4
5
6
7

# 样式

<hips-notify v-model="show" message="这是一条消息" />
<hips-notify v-model="show" type="success" message="这是一条成功提示消息" />
<hips-notify v-model="show" type="warning" message="这是一条警告消息" />
<hips-notify v-model="show" type="error" message="这是一条报错提示消息" />
1
2
3
4

# 内容对齐方式

<hips-notify
  v-model="show"
  message="这是一条内容居左消息"
  text-position="left"
/>
<hips-notify
  v-model="show"
  message="这是一条内容居中消息"
  text-position="center"
/>
<hips-notify
  v-model="show"
  message="这是一条内容居右消息"
  text-position="right"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 左侧图标

<hips-notify v-model="show" message="这是一条消息" icon="phone" />

<hips-notify v-model="show" message="这是一条消息" :image="IconNormal" />
1
2
3
import IconNormal from './assets/icon_person_normal@2x.png';
export default {
  data() {
    return {
      show: false,
      IconNormal,
    };
  },
};
1
2
3
4
5
6
7
8
9

# 右侧关闭按钮

<hips-notify
  v-model="show"
  message="这是一条消息"
  show-close
  @close="handleClose"
/>
1
2
3
4
5
6

# 持续时间

<hips-notify v-model="show" message="5000ms后关闭" :persist="5000" />

<hips-notify v-model="show" message="不会关闭" :persist="0" />
1
2
3

# 使用 ref 开启和关闭

<button @click="toggle">toggle</button>
<hips-notify ref="hipsNotify" message="这是一条消息" />
1
2
export default {
  data() {
    return { isShowing: false };
  },
  methods: {
    toggle() {
      if (this.isShowing) {
        this.$refs.hipsNotify.close();
        this.isShowing = false;
      } else {
        this.$refs.hipsNotify.open();
        this.isShowing = true;
      }
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 插件方式开启和关闭

<hips-notify id="hipsNotify" />
1
this.$hips.notify.open({ message: '提示' });
this.$hips.notify.close();
1
2

注意

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

export default {
  components: {
    'hips-notify': Notify,
  },
};

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

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

# API

参数 说明 类型 可选值 默认值
value 使用 v-model 绑定，控制显示隐藏 Boolean - false
message 消息内容 String - -
icon 左侧 icon 名称 String - -
icon-color icon 颜色(默认 'white') String - -
image 左侧图片 String - -
type 消息类型 String [default, success, warning, error] default
persist 持续时间 [Number,String] - 3000
show-close 是否显示关闭按钮 Boolean - false
text-position 内容对齐方式 String [left, center, right] left

提示

设定 persist=0 ，不会自动关闭

# Functions

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

提示

  • this.$refs.hipsNotify.open()

  • this.$refs.hipsNotify.close()

# Event

名称 说明 参数 类型
close 点击关闭按钮触发 - -
click 点击内容触发 - -

# Slots

名称 说明
- 内容插槽

# 插件使用配置

# API

参数 说明 类型 可选值 默认值
message 消息内容 String - -
icon 左侧 icon 名称 String - -
image 左侧图片 String - -
type 消息类型 String [default, success, warning, error] default
persist 持续时间 [Number,String] - 3000
showClose 是否显示关闭按钮 Boolean - false
textPosition 内容对齐方式 String [left, center, right] left
selector 选择器 String - #hipsNotify
context 选择器的选择范围，可以传入自定义组件的 this 作为上下文 Object - 当前页面

# Functions

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

提示

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

  • this.$hips.notify.close()

# 样式变量

变量名 说明 默认值
notify-min-height 容器最小高度 160rpx
notify-left-icon-width 左侧图标图片宽度 40rpx
notify-left-icon-height 左侧图标图片高度 40rpx
notify-content-font-size 内容字体大小 32rpx
notify-primary-color type=primary 时文字颜色 white
notify-primary-bg-color type=primary 时背景颜色 #1F8CEB
notify-success-color type=success 时文字颜色 white
notify-success-bg-color type=success 时背景颜色 #48D2A0
notify-error-color type=error 时文字颜色 white
notify-error-bg-color type=error 时背景颜色 #F96F68
notify-warning-color type=warning 时文字颜色 white
notify-warning-bg-color type=warning 时背景颜色 #F5A623

注意

Indicator 指示器