feat: add config-provider
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 @@
|
||||||
|
import './index.less';
|
|
@ -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 Comment } from './comment'
|
||||||
|
|
||||||
|
import { default as ConfigProvider } from './config-provider'
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
Affix,
|
Affix,
|
||||||
Anchor,
|
Anchor,
|
||||||
|
@ -180,6 +182,7 @@ const components = [
|
||||||
Drawer,
|
Drawer,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
Comment,
|
Comment,
|
||||||
|
ConfigProvider,
|
||||||
]
|
]
|
||||||
|
|
||||||
const install = function (Vue) {
|
const install = function (Vue) {
|
||||||
|
@ -259,6 +262,7 @@ export {
|
||||||
Drawer,
|
Drawer,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
Comment,
|
Comment,
|
||||||
|
ConfigProvider,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
@ -52,3 +52,4 @@ import './tree-select/style'
|
||||||
import './drawer/style'
|
import './drawer/style'
|
||||||
import './skeleton/style'
|
import './skeleton/style'
|
||||||
import './comment/style'
|
import './comment/style'
|
||||||
|
import './config-provider/style'
|
||||||
|
|
|
@ -57,6 +57,7 @@ import {
|
||||||
Drawer,
|
Drawer,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
Comment,
|
Comment,
|
||||||
|
ConfigProvider,
|
||||||
} from 'ant-design-vue'
|
} from 'ant-design-vue'
|
||||||
|
|
||||||
Vue.prototype.$message = message
|
Vue.prototype.$message = message
|
||||||
|
@ -121,6 +122,7 @@ Vue.use(Tooltip)
|
||||||
Vue.use(Upload)
|
Vue.use(Upload)
|
||||||
Vue.use(Skeleton)
|
Vue.use(Skeleton)
|
||||||
Vue.use(Comment)
|
Vue.use(Comment)
|
||||||
|
Vue.use(ConfigProvider)
|
||||||
|
|
||||||
/* v1.1.2 registration methods */
|
/* v1.1.2 registration methods */
|
||||||
// Vue.component(Affix.name, Affix) // a-affix
|
// Vue.component(Affix.name, Affix) // a-affix
|
||||||
|
|
Loading…
Reference in New Issue