# Notify 消息通知 v1.2.0

悬浮出现在页面顶部，用于展示消息提示。

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

可通过v-model | value：设定是否显示消息通知

<template>
  <pi-notify v-model="baseUsed" message="大吉大利，今晚吃鸡~" />
</template>
<script>
export default {
  data() {
    return {
      baseUsed: false
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 主要通知

可通过type：设定是否消息通知类型，可选值为success、warning、info、error

<template>
  <pi-notify v-model="primary" type="primary" message="床前明月光，疑是地上霜" />
</template>
<script>
export default {
  data() {
    return {
      primary: false
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 通知类型

可通过type：设定是否消息通知类型，可选值为success、warning、info、error

<template>
  <view>
    <!-- 主要通知 -->
    <pi-notify v-model="primary" type="primary" message="床前明月光，疑是地上霜" />
    <!-- 成功通知 -->
    <pi-notify v-model="success" type="success" message="恭喜你，答对了✔" />
    <!-- 危险通知 -->
    <pi-notify v-model="danger" type="danger" message="危险，请勿靠近！" />
    <!-- 警告通知 -->
    <pi-notify v-model="warning" type="warning" message="劳逸结合，休息一下⏰" />
    <!-- 提示通知 -->
    <pi-notify v-model="info" type="info" message="坐太久了，出去走走吧~" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      primary: false,
      success: false,
      danger: false,
      warning: false,
      info: false,
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 自定义配置

可通过type：设定是否消息通知类型，可选值为success、warning、info、error

<template>
  <view>
    <pi-notify
      v-model="customConfig"
      color="#ffffff"
      bg-color="#ff508a"
      message="可以自定义设置你喜欢的颜色和背景色"
    />
    <pi-notify
      v-model="multiLine"
      message="多行文本显示，超长文本自动隐藏显示省略号，可以显示更多内容"
    />
    <pi-notify
      v-model="singleLine"
      single-line
      message="单行文本显示，超长文本自动隐藏显示省略号，优化用户体验~"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      customConfig: false,
      multiLine: false,
      singleLine: false
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# Props

名称	描述	类型	必选	默认值
v-model/value	初始值	—	`false`	-
customStyle	自定义样式	`Object`	`false`	{}
customClass	自定义样式类	`String`	`false`	''
message	显示的消息通知文本	`String`	`false`	''
type	消息通知的类型	`'primary'` `'success'` `'danger'` `'warning'` `'info'`	`false`	'danger'
color	自定义消息通知文本字体颜色	`String`	`false`	''
bgColor	自定义消息通知文本背景色	`String`	`false`	''
duration	消息通知文本展示时长,需通过 `ref` 进行调用，单位 `ms`	`String`/`Number`	`false`	'3000'
zIndex	通知 z-index	`String`	`false`	9999
appendToBody	是否挂载到body下，防止嵌套层级无法遮罩的问题（仅H5环境生效）	`Boolean`	`false`	true
autoHide	是否自动隐藏	`Boolean`	`false`	true
singleLine	是否单行显示	`Boolean`	`false`	false

← Steps 步骤条 Tag 标签 →