docs(message): add use not int setup demo (#215)

* docs(message): use message outside of setup

* docs(message): use html

* Apply suggestions from code review

* docs(message): put use message outside setup to Q&A section

* Apply suggestions from code review

Co-authored-by: tusimple <jiwen.bai@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
Mr.Bai 2021-06-22 14:54:16 +08:00 committed by GitHub
parent 453639ab7b
commit 131a51ec75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 0 deletions

View File

@ -94,3 +94,47 @@ multiple-line
| Name | Type | Description | | Name | Type | Description |
| ------- | ---- | ----------- | | ------- | ---- | ----------- |
| destroy | `()` | | | destroy | `()` | |
## Q & A
### Use Message Outside Setup
<n-space vertical>
<n-alert type="warning">
You need to mount the return value of <n-text code>useMessage</n-text> to the window in the top-level setup and then call it. Before calling it, you need to make sure that message has been mounted successfully.
</n-alert>
```html
<!-- App.vue -->
<n-message-provider>
<content />
</n-message-provider>
```
```html
<!-- content.vue -->
<template>...</template>
<script>
import { useMessage } from 'naive-ui'
// content
export default {
setup() {
window.$message = useMessage()
}
}
</script>
```
```js
// xxx.js
export const handler = () => {
// You need to ensure that window.$message = message has been executed in setup
window.$message.success(
'Cause you walked hand in hand With another man in my place'
)
}
```
</n-space>

View File

@ -94,3 +94,47 @@ multiple-line
| 名称 | 类型 | 说明 | | 名称 | 类型 | 说明 |
| ------- | ---- | ---- | | ------- | ---- | ---- |
| destroy | `()` | | | destroy | `()` | |
## Q & A
### 在 setup 外使用
<n-space vertical>
<n-alert type="warning">
如果你想在 setup 外使用信息,你需要在顶层 setup 中把 <n-text code>useMessage</n-text> 返回的 message 值挂载到 window 下然后再调用,调用前需要确保 message 已经挂载成功。
</n-alert>
```html
<!-- App.vue -->
<n-message-provider>
<content />
</n-message-provider>
```
```html
<!-- content.vue -->
<template>...</template>
<script>
import { useMessage } from 'naive-ui'
// content
export default {
setup() {
window.$message = useMessage()
}
}
</script>
```
```js
// xxx.js
export const handler = () => {
// 需要确保已经在 setup 中执行了 window.$message = message
window.$message.success(
'Cause you walked hand in hand With another man in my place'
)
}
```
</n-space>