Navive UI官方文档
有提示:
在 vue3 中的setup里无法直接使用,现在要使用的话需要进行如下操作:
1、创建其他组件用于存放 Message,路径如下:
index.ts内容如下:
import MessageContent from './index.vue';
export { MessageContent };
index.vue内容如下:
<template></template>
<script lang="ts">
import { useMessage } from 'naive-ui';
export default {
name: 'MessageContent',
setup() {
//挂载在 window 方便与在js中使用
window['$message'] = useMessage();
},
};
</script>
2、创建<n-message-provider>所在组件,路径如下:
Application.vue内容如下:(这里顺便把其他常用的组件一起封装了,方便后续使用,要是就用message就只要封装一个就行
<n-message-provider>
<MessageContent />
<slot></slot>
</n-message-provider>
保留这一段即可
)
<template>
<NConfigProvider>
<n-loading-bar-provider>
<LoadingBarContent />
<n-dialog-provider>
<DialogContent />
<n-notification-provider>
<n-message-provider>
<MessageContent />
<slot></slot>
</n-message-provider>
</n-notification-provider>
</n-dialog-provider>
</n-loading-bar-provider>
</NConfigProvider>
</template>
<script lang="ts" setup>
import { MessageContent } from '@/components/Application/content/Message';
import { DialogContent } from '@/components/Application/content/Dialog';
import { LoadingBarContent } from '@/components/Application/content/Loadingbar';
import {
NConfigProvider,
NDialogProvider,
NNotificationProvider,
NMessageProvider,
NLoadingBarProvider,
} from 'naive-ui';
</script>
index.ts内容如下:
// @ts-ignore
import AppProvider from './Application.vue';
export { AppProvider };
3、系统如何使用:
在App.vue引用:
<template>
<div id="app">
<AppProvider>
<router-view></router-view>
</AppProvider>
</div>
</template>
<script setup lang="ts">
import {RouterView} from 'vue-router'
import { AppProvider } from '@/components/Application';
</script>
<style scoped>
</style>
然后就可以在其他vue里直接使用了:
import { useMessage } from 'naive-ui'
const message=useMessage();
message.info("开始使用");