mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
feat: add config-provider
This commit is contained in:
parent
05deb537f6
commit
7dbf5ed4d7
32
components/config-provider/demo/index.vue
Normal file
32
components/config-provider/demo/index.vue
Normal file
@ -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>
|
16
components/config-provider/index.en-US.md
Normal file
16
components/config-provider/index.en-US.md
Normal file
@ -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` |
|
25
components/config-provider/index.jsx
Normal file
25
components/config-provider/index.jsx
Normal file
@ -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
|
||||
|
15
components/config-provider/index.zh-CN.md
Normal file
15
components/config-provider/index.zh-CN.md
Normal file
@ -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 |
|
1
components/config-provider/style/index.js
Normal file
1
components/config-provider/style/index.js
Normal file
@ -0,0 +1 @@
|
||||
import './index.less';
|
2
components/config-provider/style/index.less
Normal file
2
components/config-provider/style/index.less
Normal file
@ -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…
Reference in New Issue
Block a user