feat: add config-provider

pull/398/head
tangjinzhou 6 years ago
parent 05deb537f6
commit 7dbf5ed4d7

@ -0,0 +1,32 @@
<script>
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# ConfigProvider 全局化配置
为组件提供统一的全局化配置`,
us: `# ConfigProvider
\`ConfigProvider\` provides a uniform configuration support for components.
`,
}
export default {
category: 'Components',
subtitle: '全局化配置',
cols: 1,
type: '其他',
title: 'ConfigProvider',
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
},
}
</script>

@ -0,0 +1,16 @@
## Usage
This component provides a configuration to all Vue components underneath itself via the [provide / inject](https://vuejs.org/v2/api/#provide-inject), In the render tree all components will have access to the provided config.
````html
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
````
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |

@ -0,0 +1,25 @@
import PropTypes from '../_util/vue-types'
const ConfigProvider = {
name: 'AConfigProvider',
props: {
getPopupContainer: PropTypes.func,
},
provide () {
return {
configProvider: this.$props,
}
},
render () {
return this.$slots.default ? this.$slots.default[0] : null
},
}
/* istanbul ignore next */
ConfigProvider.install = function (Vue) {
Vue.component(ConfigProvider.name, ConfigProvider)
}
export default ConfigProvider

@ -0,0 +1,15 @@
## 使用
ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性,只需在应用外围包裹一次即可全局生效。
````html
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
````
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| getPopupContainer | 弹出框Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | Function(triggerNode) | () => document.body |

@ -0,0 +1,2 @@
// placeholder
@import '../../style/themes/default';

@ -126,6 +126,8 @@ import { default as Skeleton } from './skeleton'
import { default as Comment } from './comment'
import { default as ConfigProvider } from './config-provider'
const components = [
Affix,
Anchor,
@ -180,6 +182,7 @@ const components = [
Drawer,
Skeleton,
Comment,
ConfigProvider,
]
const install = function (Vue) {
@ -259,6 +262,7 @@ export {
Drawer,
Skeleton,
Comment,
ConfigProvider,
}
export default {

@ -52,3 +52,4 @@ import './tree-select/style'
import './drawer/style'
import './skeleton/style'
import './comment/style'
import './config-provider/style'

@ -57,6 +57,7 @@ import {
Drawer,
Skeleton,
Comment,
ConfigProvider,
} from 'ant-design-vue'
Vue.prototype.$message = message
@ -121,6 +122,7 @@ Vue.use(Tooltip)
Vue.use(Upload)
Vue.use(Skeleton)
Vue.use(Comment)
Vue.use(ConfigProvider)
/* v1.1.2 registration methods */
// Vue.component(Affix.name, Affix) // a-affix

Loading…
Cancel
Save