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
|
```demo
|
||||||
theme
|
theme
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# 命名空间
|
# 命名空间
|
||||||
组件的一部分是游离于 `document.body`的。如需给这些游离的元素添加class,使用应用的 `namespace` 属性。打开开发者工具查看游离的内容。
|
组件的一部分是游离于 `document.body` 的。如需给这些游离的元素添加class,使用应用的 `namespace` 属性。打开开发者工具查看游离的内容。
|
||||||
```html
|
```html
|
||||||
<n-config-provider :namespace="ns">
|
<n-config-provider :namespace="ns">
|
||||||
<n-button
|
<n-button
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<n-config-provider :theme="theme" :theme-environment="env" transparent>
|
<n-config-provider :theme="theme" :theme-environment="env" transparent>
|
||||||
<n-config-consumer>
|
<n-config-consumer>
|
||||||
<template v-slot="{ themeEnvironment }">
|
<template v-slot="{ themeEnvironment }">
|
||||||
无包装DOM: {{ themeEnvironment }}
|
无包装DOM:{{ themeEnvironment }}
|
||||||
</template>
|
</template>
|
||||||
</n-config-consumer>
|
</n-config-consumer>
|
||||||
</n-config-provider>
|
</n-config-provider>
|
||||||
|
Loading…
Reference in New Issue
Block a user