ConfigProvider 全局化配置

为组件提供统一的全局化配置。

国际化

此处列出 Ant Design Vue 中需要国际化支持的组件，你可以在演示里切换语言。

<template>
  <div>
    <div class="change-locale">
      <span style="margin-right: 16px">Change locale of components: </span>
      <a-radio-group :value="locale" @change="changeLocale">
        <a-radio-button key="en" :value="enUS">
          English
        </a-radio-button>
        <a-radio-button key="cn" :value="zhCN">
          中文
        </a-radio-button>
      </a-radio-group>
    </div>
    <a-config-provider :locale="locale">
      <div :key="locale ? locale.locale : 'en'" class="locale-components">
        <div class="example">
          <a-pagination :default-current="1" :total="50" show-size-changer />
        </div>
        <div class="example">
          <a-select show-search style="width: 200px">
            <a-select-option value="jack">
              jack
            </a-select-option>
            <a-select-option value="lucy">
              lucy
            </a-select-option>
          </a-select>
          <a-date-picker />
          <a-time-picker />
          <a-range-picker style="width: 200px" />
        </div>
        <div class="example">
          <a-button type="primary" @click="visible = true">
            Show Modal
          </a-button>
          <a-button @click="info">
            Show info
          </a-button>
          <a-button @click="confirm">
            Show confirm
          </a-button>
          <a-popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </a-popconfirm>
        </div>
        <div class="example">
          <a-transfer
            :data-source="[]"
            show-search
            :target-keys="[]"
            :render="item => item.title"
          />
        </div>
        <div style="width: 319px; border: 1px solid #d9d9d9; border-radius: 4px">
          <a-calendar :fullscreen="false" :value="moment()" />
        </div>
        <div class="example">
          <a-table :data-source="[]" :columns="columns" />
        </div>
        <a-modal v-model="visible" title="Locale Modal">
          <p>Locale Modal</p>
        </a-modal>
      </div>
    </a-config-provider>
  </div>
</template>
<script>
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'filter1',
        value: 'filter1',
      },
    ],
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
];
export default {
  data() {
    return {
      columns,
      visible: false,
      locale: enUS,
      moment,
      enUS,
      zhCN,
    };
  },
  methods: {
    changeLocale(e) {
      const localeValue = e.target.value;
      this.locale = localeValue;
      if (!localeValue) {
        moment.locale('en');
      } else {
        moment.locale('zh-cn');
      }
    },
    info() {
      this.$info({
        title: 'some info',
        content: 'some info',
      });
    },
    confirm() {
      this.$confirm({
        title: 'some info',
        content: 'some info',
      });
    },
  },
};
</script>
<style scoped>
.locale-components {
  border-top: 1px solid #d9d9d9;
  padding-top: 16px;
}
.example {
  margin: 16px 0;
}
.example > * {
  margin-right: 8px;
}
.change-locale {
  margin-bottom: 16px;
}
</style>

使用

ConfigProvider 使用 Vue 的 provide / inject 特性，只需在应用外围包裹一次即可全局生效。

<template>
  <a-config-provider :getPopupContainer="getPopupContainer">
    <app />
  </a-config-provider>
</template>
<script>
  export default {
    methods: {
      getPopupContainer(el, dialogContext) {
        if (dialogContext) {
          return dialogContext.getDialogWrap();
        } else {
          return document.body;
        }
      },
    },
  };
</script>

Content Security Policy

部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 csp 属性来进行配置：

<a-config-provider :csp="{ nonce: 'YourNonceCode' }">
  <a-button>My Button</a-button>
</a-config-provider>

API

FAQ

为什么我使用了 ConfigProvider locale，时间类组件的国际化还有问题？

请检查是否设置了 moment.locale('zh-cn')，或者是否有两个版本的 moment 共存。

配置 getPopupContainer 导致 Modal 报错？

当如下全局设置 getPopupContainer 为触发节点的 parentNode 时，由于 Modal 的用法不存在 triggerNode，这样会导致 triggerNode is undefined 的报错，需要增加一个判断条件。

 <ConfigProvider
-  getPopupContainer={triggerNode => triggerNode.parentNode}
+  getPopupContainer={node => {
+    if (node) {
+      return node.parentNode;
+    }
+    return document.body;
+  }}
 >
   <App />
 </ConfigProvider>