ant-design-vue

3.4 KiB

Raw Blame History

category	cols	type	title	cover	coverDark
Components	1	Other	App	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original

Application wrapper for some global usages.

When To Use

Provide reset styles based on .ant-app element.
You could use static methods of message/notification/Modal form useApp without writing contextHolder manually.

API

App

Property	Description	Type	Default	Version
message	Global config for Message	MessageConfig	-	4.x
notification	Global config for Notification	NotificationConfig	-	4.x

How to use

Basic usage

App provides upstream and downstream method calls through provide/inject, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.

/*myPage.vue*/
<template>
  <a-space>
    <a-button type="primary" @click="showMessage">Open message</a-button>
    <a-button type="primary" @click="showModal">Open modal</a-button>
    <a-button type="primary" @click="showNotification">Open notification</a-button>
  </a-space>
</template>

<script setup lang="ts">
  import { App } from 'ant-design-vue';

  const { message, modal, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showModal = () => {
    modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  };

  const showNotification = () => {
    notification.info({
      message: `Notification topLeft`,
      description: 'Hello, Ant Design Vue!!',
      placement: 'topLeft',
    });
  };
</script>

Note: App.useApp must be available under App.

Embedded usage scenarios (if not necessary, try not to do nesting)

<a-app>
  <a-space>
    ...
    <a-app>...</a-app>
  </a-space>
</a-app>

Sequence with ConfigProvider

The App component can only use the token in the ConfigProvider, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.

<a-config-provider theme="{{ ... }}">
  <a-app>...</a-app>
</a-config-provider>

Global scene (pinia scene)

import { App } from 'ant-design-vue';
import type { MessageInstance } from 'ant-design-vue/es/message/interface';
import type { ModalStaticFunctions } from 'ant-design-vue/es/modal/confirm';
import type { NotificationInstance } from 'ant-design-vue/es/notification/interface';

export const useGloablStore = defineStore('global', () => {
  const message: MessageInstance = ref();
  const notification: NotificationInstance = ref();
  const modal: Omit<ModalStaticFunctions, 'warn'> = ref();
  (() => {
    const staticFunction = App.useApp();
    message.value = staticFunction.message;
    modal.value = staticFunction.modal;
    notification.value = staticFunction.notification;
  })();

  return { message, notification, modal };
});

// sub page
<template>
  <a-space>
    <a-button type="primary" @click="showMessage">Open message</a-button>
  </a-space>
</template>

<script setup>
  import { useGlobalStore } from '@/stores/global';
  const global = useGlobalStore();
  const showMessage = () => {
    global.message.success('Success!');
  };
</script>

3.4 KiB Raw Blame History