不像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')

Logo

前往低代码交流专区

更多推荐