mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
commit
92462fbde8
@ -94,3 +94,47 @@ multiple-line
|
||||
| Name | Type | Description |
|
||||
| ------- | ---- | ----------- |
|
||||
| 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 | `()` | |
|
||||
|
||||
## 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>
|
||||
|
@ -24,7 +24,6 @@ preset-confirm-slot
|
||||
| mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |
|
||||
| preset | `'card' \| 'confirm'` | `undefined` | |
|
||||
| show | `boolean` | `false` | Whether to show modal. |
|
||||
| show-mask | `boolean` | `true` | Whether to show mask of the modal. |
|
||||
| on-update:show | `(value: boolean) => void` | `undefined` | Callback when modal's display status is changed. |
|
||||
|
||||
### Modal with Preset Card
|
||||
|
@ -35,7 +35,6 @@ dark-10-debug
|
||||
| mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |
|
||||
| preset | `'card' \| 'dialog'` | `undefined` | 模态框使用何种预设 |
|
||||
| show | `boolean` | `false` | 是否展示 Modal |
|
||||
| show-mask | `boolean` | `true` | 是否展示 Modal 的遮罩 |
|
||||
| on-update:show | `(value: boolean) => void` | `undefined` | 模态框更新是否展示状态的回调 |
|
||||
|
||||
### Modal(Card 预设)
|
||||
|
Loading…
Reference in New Issue
Block a user