【Vue3】【Naive UI】＜n-message＞标签

【VUE3】【Naive UI】＜NCard＞ 标签
【VUE3】【Naive UI】＜n-button＞ 标签
【VUE3】【Naive UI】＜a＞ 标签
【VUE3】【Naive UI】＜NDropdown＞ 标签
【VUE3】【Naive UI】＜n-upload＞标签
【VUE3】【Naive UI】＜n-message＞标签

在 Naive UI 中， 组件的使用通常是通过 useMessage 钩子来实现的。
这个钩子返回一个对象，该对象提供了多种方法（如 info, success, warning, error 等）用于显示不同类型的提示信息。
每个方法都可以接受一个配置对象作为参数，以自定义消息的行为和外观。
下面我将列出所有可用的参数，并为每个参数提供示例代码。

content (String | VNode)

这是消息的主要内容，可以是简单的字符串或 Vue 的虚拟节点（VNode）。

<script setup>
import { useMessage } from 'naive-ui';

const message = useMessage();

function showContent() {
  message.info({
    content: '这是一个简单的文本消息'
  });
}
</script>

<template>
  <button @click="showContent">显示文本消息</button>
</template>

对于 VNode 内容：

<script setup>
import { h, useMessage } from 'naive-ui';

const message = useMessage();

function showVNodeContent() {
  message.info({
    content: h('span', { style: 'color: blue' }, '这是一段蓝色的文字')
  });
}
</script>

<template>
  <button @click="showVNodeContent">显示VNode内容的消息</button>
</template>