nano-ui

ConfigProvider 全局配置 ​

ConfigProvider 组件提供了一个配置中心，承载应用所需的全局配置。

基础用法 ​

通过 ConfigProvider 包裹应用，可以配置语言、消息提示等全局属性。

<template>
  <n-config-provider :z-index="3000">
    <n-button @click="open">打开消息</n-button>
  </n-config-provider>
</template>

<script setup lang="ts">
import { NConfigProvider, NMessage } from 'nano-ui-vue';

const open = () => {
  NMessage('这条消息的 z-index 是 3000');
};
</script>

国际化配置 ​

通过 locale 属性可以配置组件内部文案的语言。Nano-UI 内置了中文、英文和日文的语言配置。

<template>
  <n-config-provider :locale="locale">
    <n-button @click="toggleLocale"> 当前语言: {{ currentLocale }} </n-button>
    <n-button @click="open">打开消息</n-button>
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { NConfigProvider, NMessage } from 'nano-ui-vue';
import { en, ja, zhCn } from '@nano-ui/locale';

const locales = {
  'zh-CN': zhCn,
  'en-US': en,
  'ja-JP': ja,
};

const currentLocale = ref('zh-CN');
const locale = ref(zhCn);

const toggleLocale = () => {
  const localeKeys = Object.keys(locales);
  const currentIndex = localeKeys.indexOf(currentLocale.value);
  const nextIndex = (currentIndex + 1) % localeKeys.length;
  currentLocale.value = localeKeys[nextIndex];
  locale.value = locales[currentLocale.value];
};

const open = () => {
  NMessage('测试国际化配置');
};
</script>

消息配置 ​

通过 message 属性可以配置消息提示组件的默认行为。

<template>
  <n-config-provider
    :message="{
      max: 3,
      duration: 5000,
      showClose: true,
    }"
  >
    <n-button @click="open">显示多条消息</n-button>
  </n-config-provider>
</template>

<script setup lang="ts">
import { NConfigProvider, NMessage } from 'nano-ui-vue';

const open = () => {
  NMessage('消息 1');
  NMessage('消息 2');
  NMessage('消息 3');
  NMessage('消息 4'); // 由于 max: 3，这条消息不会显示
};
</script>

通知配置 ​

通过 notification 属性可以配置通知组件的默认行为。

<template>
  <n-config-provider
    :notification="{
      duration: 5000,
      position: 'top-right',
      max: 4,
    }"
  >
    <n-button @click="open">显示通知</n-button>
  </n-config-provider>
</template>

<script setup lang="ts">
import { NConfigProvider, NNotify } from 'nano-ui-vue';

const open = () => {
  NNotify({
    title: '通知标题',
    message: '这是一条通知消息',
  });
};
</script>

API ​

Props ​

名称说明类型默认值
locale翻译文本对象Language-
messageMessage 组件的全局配置MessageConfigContext-
notificationNotification 组件的全局配置NotificationConfigContext-
zIndex弹出类组件的初始 z-indexnumber2000

Slots ​

插槽名说明作用域参数
default默认插槽{ config: ConfigProviderContext }