You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.6 KiB
101 lines
3.6 KiB
2 years ago
|
## 代码演示
|
||
|
|
|
||
|
|
### 基础用法
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- 在页面内添加对应的节点 -->
|
||
|
|
<hd-notify></hd-notify>
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
<script lang="ts" setup>
|
||
|
|
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
const notify = useNotify()
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
notify.showNotify('哈喽啊，树先生！')
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
### 通知类型
|
||
|
|
|
||
|
|
支持`primary`、`success`、`warning`、`error`四种通知类型，默认为`error`。
|
||
|
|
|
||
|
|
```ts
|
||
|
|
// 主要通知
|
||
|
|
notify.showNotify({ type: 'primary', message: '哈喽啊，树先生！' })
|
||
|
|
|
||
|
|
// 成功通知
|
||
|
|
notify.showNotify({ type: 'success', message: '哈喽啊，树先生！' })
|
||
|
|
|
||
|
|
// 危险通知
|
||
|
|
notify.showNotify({ type: 'error', message: '哈喽啊，树先生！' })
|
||
|
|
|
||
|
|
// 警告通知
|
||
|
|
notify.showNotify({ type: 'warning', message: '哈喽啊，树先生！' })
|
||
|
|
```
|
||
|
|
|
||
|
|
### 自定义通知
|
||
|
|
|
||
|
|
自定义消息通知的颜色和展示时长。
|
||
|
|
|
||
|
|
```ts
|
||
|
|
notify.showNotify({
|
||
|
|
message: '自定义颜色',
|
||
|
|
color: '#AAEEBB',
|
||
|
|
background: '#FFAAEE'
|
||
|
|
})
|
||
|
|
|
||
|
|
notify.showNotify({
|
||
|
|
message: '自定义时长',
|
||
|
|
duration: 1500
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
### 组件式调用
|
||
|
|
|
||
|
|
通过组件式调用使用 Notify。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- 在页面内添加对应节点 -->
|
||
|
|
<hd-notify v-model="show" message="你好啊【表情】 "></hd-notify>
|
||
|
|
```
|
||
|
|
|
||
|
|
```js
|
||
|
|
const show = ref<boolean>(false)
|
||
|
|
```
|
||
|
|
|
||
|
|
值得注意的是，组件式调用不支持`onClick`、`onOpened`、`onClose`回调。
|
||
|
|
|
||
|
|
## 方法
|
||
|
|
|
||
|
|
### `fant-mini` 中导出了以下 `Notify` 相关的辅助函数：
|
||
|
|
|
||
|
|
| 方法名 | 说明 | 参数 | 返回值 |
|
||
|
|
| ---------- | -------- | --------------- | ------------ |
|
||
|
|
| showNotify | 展示通知 | `NotifyOptions` | `Notify`实例 |
|
||
|
|
|
||
|
|
## `NotifyOptions` 数据结构
|
||
|
|
|
||
|
|
### 调用 `showNotify` 方法时，支持传入以下选项：
|
||
|
|
|
||
|
|
| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
|
||
|
|
| ---------------- | ---------------------------------------------------------- | ------------ | -------- | ----------- |
|
||
|
|
| type | 底色类型，可选值:`primary`、 `success`、`error`、`warning` | `NotifyType` | `false` | `error` |
|
||
|
|
| color | 自定义文字颜色 | `String` | `false` | `#FFFFFF` |
|
||
|
|
| zIndex | 组件层级 | `Number` | `false` | `110` |
|
||
|
|
| top | 距离顶部长度 | `Number` | `false` | `0` |
|
||
|
|
| message | 提示的内容 | `String` | `false` | '' |
|
||
|
|
| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | `Object` | `false` | 当前页面 |
|
||
|
|
| duration | 展示时长(ms)，值为 0 时，notify 不会消失，默认值 3000 | `Number` | `false` | `3000` |
|
||
|
|
| selector | 自定义节点选择器 | `String` | `false` | `hd-notify` |
|
||
|
|
| background | 背景颜色 | `String` | `false` | `-` |
|
||
|
|
| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度） | `Boolean` | `false` | `false` |
|
||
|
|
| onClick | 点击时的回调函数 | `Function` | `false` | `-` |
|
||
|
|
| onOpened | 完全展示后的回调函数 | `Function` | `false` | `-` |
|
||
|
|
| onClose | 关闭时的回调函数 | `Function` | `false` | `-` |
|