【Vue3】【Naive UI】<n-message>标签

【Vue3】【Naive UI】标签

      • content (String | VNode)

【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>
上一篇:浅谈人工智能之基于VGG16与Kmeans进行图像分类


下一篇:洛谷P1115