Vue3中使用navieUI的message方法
不像vue2中使用element UI这么方便,vue3中使用message的配置方法如下:1,增加一个组件 message-api.vue<template><div></div></template><script>import { defineComponent, getCurrentInstance } from "vue";im
·
不像vue2中使用element UI这么方便,vue3中使用message的配置方法如下:
1,增加一个组件 message-api.vue
<template>
<div></div>
</template>
<script>
import { defineComponent, getCurrentInstance } from "vue";
import { useMessage } from "naive-ui";
export default defineComponent({
setup() {
window.$message = useMessage();
},
});
</script>
2,在App.vue中增加如下配置
<template>
<n-message-provider>
<MessageApi />
</n-message-provider>
<router-view />
</template>
<script>
import MessageApi from "@/components/message-api.vue";
import { NMessageProvider } from "naive-ui";
export default {
components: { MessageApi, NMessageProvider },
name: "App",
setup(props) {},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
3.任意组件内使用方式:
window.$message.success("success message");
window.$message.error('error message')
window.$message.warning('warning messsage')
更多推荐
已为社区贡献1条内容
所有评论(0)