mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
configConsumer-zhcn & fix configProvider-zhcn
This commit is contained in:
parent
a89acd7793
commit
780f5a1a54
26
demo/documentation/components/configConsumer/zhCN/basic.md
Normal file
26
demo/documentation/components/configConsumer/zhCN/basic.md
Normal 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')
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
@ -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>
|
||||
```
|
@ -0,0 +1,8 @@
|
||||
# 配置消费者
|
||||
配置消费者的作用是获取配置提供者的(通常是全局的)配置。当你想创建一个支持主题或其他可变特性的组件时,它十分管用。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
theme-environment
|
||||
color
|
||||
```
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
@ -1,5 +1,5 @@
|
||||
# 全局化配置
|
||||
全局化配置用来设置全局主题和组件的命名空间(游离的部分)。
|
||||
# 配置提供者
|
||||
配置提供者用来设置全局主题和组件的命名空间(游离的部分)。
|
||||
## 演示
|
||||
```demo
|
||||
theme
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user