【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>