configConsumer-zhcn & fix configProvider-zhcn

This commit is contained in:
liumeo 2020-01-08 01:58:39 +08:00
parent a89acd7793
commit 780f5a1a54
7 changed files with 72 additions and 4 deletions

View File

@ -0,0 +1,26 @@
# 基础
```html
<n-config-consumer
@theme-change="handleThemeChange"
@namespace-change="handleNamespaceChange"
>
<template v-slot="{ theme, namespace }">
<div>
<div>主题:{{ theme }}</div>
<div>命名空间:{{ namespace }}</div>
</div>
</template>
</n-config-consumer>
```
```js
export default {
methods: {
handleThemeChange (value, oldValue) {
this.$NMessage.info('Theme Change: `' + value + '` theme')
},
handleNamespaceChange (value, oldValue) {
this.$NMessage.info('Namespace Change: `' + value + '` namespace')
}
}
}
```

View File

@ -0,0 +1,9 @@
# 样式方案
```html
<n-config-consumer>
<template v-slot="{ styleScheme }">
<n-code :code="JSON.stringify(styleScheme, 0, 2)" language="js"></n-code>
</template>
</n-config-consumer>
```

View File

@ -0,0 +1,8 @@
# 配置消费者
配置消费者的作用是获取配置提供者的(通常是全局的)配置。当你想创建一个支持主题或其他可变特性的组件时,它十分管用。
## 演示
```demo
basic
theme-environment
color
```

View File

@ -0,0 +1,25 @@
# 主题环境
```html
<n-button @click="theme = 'dark'">深色主题</n-button>
<n-button @click="theme = 'light'">浅色主题</n-button>
<n-config-provider :theme="theme" :theme-environment="env">
<n-config-consumer>
<template v-slot="{ themeEnvironment }">
{{ themeEnvironment }}
</template>
</n-config-consumer>
</n-config-provider>
```
```js
export default {
data () {
return {
theme: 'light',
env: {
dark: '深色666',
light: '浅色666'
}
}
}
}
```

View File

@ -1,5 +1,5 @@
# 全局化配置
全局化配置用来设置全局主题和组件的命名空间(游离的部分)。
# 配置提供者
配置提供者用来设置全局主题和组件的命名空间(游离的部分)。
## 演示
```demo
theme

View File

@ -1,5 +1,5 @@
# 命名空间
组件的一部分是游离于 `document.body`的。如需给这些游离的元素添加class使用应用的 `namespace` 属性。打开开发者工具查看游离的内容。
组件的一部分是游离于 `document.body` 的。如需给这些游离的元素添加class使用应用的 `namespace` 属性。打开开发者工具查看游离的内容。
```html
<n-config-provider :namespace="ns">
<n-button

View File

@ -6,7 +6,7 @@
<n-config-provider :theme="theme" :theme-environment="env" transparent>
<n-config-consumer>
<template v-slot="{ themeEnvironment }">
无包装DOM: {{ themeEnvironment }}
无包装DOM{{ themeEnvironment }}
</template>
</n-config-consumer>
</n-config-provider>