mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
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:
parent
453639ab7b
commit
131a51ec75
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user