diff --git a/example/app.json b/example/app.json
index 4421f09c..1410d9a2 100644
--- a/example/app.json
+++ b/example/app.json
@@ -51,7 +51,8 @@
"pages/divider/index",
"pages/empty/index",
"pages/calendar/index",
- "pages/share-sheet/index"
+ "pages/share-sheet/index",
+ "pages/config-provider/index"
],
"window": {
"navigationBarBackgroundColor": "#f8f8f8",
@@ -125,7 +126,8 @@
"van-dropdown-item": "./dist/dropdown-item/index",
"van-skeleton": "./dist/skeleton/index",
"van-calendar": "./dist/calendar/index",
- "van-share-sheet": "./dist/share-sheet/index"
+ "van-share-sheet": "./dist/share-sheet/index",
+ "van-config-provider": "./dist/config-provider/index"
},
"sitemapLocation": "sitemap.json"
}
diff --git a/example/config.js b/example/config.js
index 5398bc4e..6ca1e0a1 100644
--- a/example/config.js
+++ b/example/config.js
@@ -11,6 +11,10 @@ export default [
path: '/cell',
title: 'Cell 单元格',
},
+ {
+ path: '/config-provider',
+ title: 'ConfigProvider 全局配置',
+ },
{
path: '/icon',
title: 'Icon 图标',
diff --git a/example/pages/config-provider/index.js b/example/pages/config-provider/index.js
new file mode 100644
index 00000000..8881f493
--- /dev/null
+++ b/example/pages/config-provider/index.js
@@ -0,0 +1,24 @@
+import Page from '../../common/page';
+
+Page({
+ data: {
+ rate: 4,
+ slider: 50,
+ themeVars: {
+ rateIconFullColor: '#07c160',
+ sliderBarHeight: '4px',
+ sliderButtonWidth: '20px',
+ sliderButtonHeight: '20px',
+ sliderActiveBackgroundColor: '#07c160',
+ buttonPrimaryBorderColor: '#07c160',
+ buttonPrimaryBackgroundColor: '#07c160',
+ },
+ },
+
+ onChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({
+ [key]: event.detail,
+ });
+ },
+});
diff --git a/example/pages/config-provider/index.json b/example/pages/config-provider/index.json
new file mode 100644
index 00000000..798086f5
--- /dev/null
+++ b/example/pages/config-provider/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "ConfigProvider 全局配置"
+}
diff --git a/example/pages/config-provider/index.wxml b/example/pages/config-provider/index.wxml
new file mode 100644
index 00000000..df95c7a3
--- /dev/null
+++ b/example/pages/config-provider/index.wxml
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
diff --git a/example/project.config.json b/example/project.config.json
index 187e5f0f..74f8b828 100644
--- a/example/project.config.json
+++ b/example/project.config.json
@@ -92,6 +92,12 @@
"pathName": "pages/cell/index",
"query": ""
},
+ {
+ "id": -1,
+ "name": "config-provider",
+ "pathName": "pages/config-provider/index",
+ "query": ""
+ },
{
"id": -1,
"name": "card",
@@ -403,4 +409,4 @@
]
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/config-provider/README.md b/packages/config-provider/README.md
new file mode 100644
index 00000000..9e7c9866
--- /dev/null
+++ b/packages/config-provider/README.md
@@ -0,0 +1,106 @@
+# ConfigProvider 全局配置
+
+### 介绍
+
+用于配置 Vant Weapp 组件的主题样式，从 `v1.7.0` 版本开始支持。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
+
+```json
+"usingComponents": {
+ "van-config-provider": "@vant/weapp/config-provider/index"
+}
+```
+
+## 定制主题
+
+### 介绍
+
+Vant Weapp 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 CSS 变量，可以实现**定制主题、动态切换主题**等效果。
+
+#### 示例
+
+以 Button 组件为例，查看组件的样式，可以看到 `.van-button--primary` 类名上存在以下变量：
+
+```css
+.van-button--primary {
+ color: var(--button-primary-color,#fff);
+ background: var(--button-primary-background-color,#07c160);
+ border: var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160);
+}
+```
+
+### 自定义 CSS 变量
+
+#### 通过 CSS 覆盖
+
+你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+
+```css
+/* 添加这段样式后，Primary Button 会变成红色 */
+page {
+ --button-primary-background-color: red;
+}
+```
+
+#### 通过 ConfigProvider 覆盖
+
+`ConfigProvider` 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme-vars` 属性来配置一些主题变量。
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+```
+
+```js
+import Page from '../../common/page';
+
+Page({
+ data: {
+ rate: 4,
+ slider: 50,
+ themeVars: {
+ rateIconFullColor: '#07c160',
+ sliderBarHeight: '4px',
+ sliderButtonWidth: '20px',
+ sliderButtonHeight: '20px',
+ sliderActiveBackgroundColor: '#07c160',
+ buttonPrimaryBorderColor: '#07c160',
+ buttonPrimaryBackgroundColor: '#07c160',
+ }
+ },
+
+ onChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({
+ [key]: event.detail,
+ });
+ }
+});
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------- | -------------- | -------- | ------ |
+| theme-vars | 自定义主题变量 | _object_ | - |
diff --git a/packages/config-provider/index.json b/packages/config-provider/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/config-provider/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
diff --git a/packages/config-provider/index.ts b/packages/config-provider/index.ts
new file mode 100644
index 00000000..940571fd
--- /dev/null
+++ b/packages/config-provider/index.ts
@@ -0,0 +1,10 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+ props: {
+ themeVars: {
+ type: Object,
+ value: {},
+ },
+ },
+});
diff --git a/packages/config-provider/index.wxml b/packages/config-provider/index.wxml
new file mode 100644
index 00000000..3cfb4614
--- /dev/null
+++ b/packages/config-provider/index.wxml
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/packages/config-provider/index.wxs b/packages/config-provider/index.wxs
new file mode 100644
index 00000000..7ca02030
--- /dev/null
+++ b/packages/config-provider/index.wxs
@@ -0,0 +1,29 @@
+/* eslint-disable */
+var object = require('../wxs/object.wxs');
+var style = require('../wxs/style.wxs');
+
+function kebabCase(word) {
+ var newWord = word
+ .replace(getRegExp("[A-Z]", 'g'), function (i) {
+ return '-' + i;
+ })
+ .toLowerCase()
+ .replace(getRegExp("^-"), '');
+
+ return newWord;
+}
+
+function mapThemeVarsToCSSVars(themeVars) {
+ var cssVars = {};
+ object.keys(themeVars).forEach(function (key) {
+ var cssVarsKey = '--' + kebabCase(key);
+ cssVars[cssVarsKey] = themeVars[key];
+ });
+
+ return style(cssVars);
+}
+
+module.exports = {
+ kebabCase: kebabCase,
+ mapThemeVarsToCSSVars: mapThemeVarsToCSSVars,
+};
diff --git a/vant.config.js b/vant.config.js
index 360289d1..1afb10f5 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -72,6 +72,10 @@ module.exports = {
path: 'cell',
title: 'Cell 单元格',
},
+ {
+ path: 'config-provider',
+ title: 'ConfigProvider 全局配置',
+ },
{
path: 'icon',
title: 'Icon 图标',