blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(ConfigProvider): make theme vars reactive (#11463)

Browse Source
This commit is contained in:
neverland 2023-01-07 17:00:33 +08:00 committed by GitHub
parent 307b586d49
commit 12e0935948
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/vant/src/config-provider/README.md
View File

@ -133,7 +133,7 @@ The `ConfigProvider` component provides the ability to override CSS variables. Y
```
```js
import { ref } from 'vue';
import { ref, reactive } from 'vue';
export default {
setup() {
@ -142,7 +142,7 @@ export default {
// ThemeVars will be converted to the corresponding CSS variable
// For example, sliderBarHeight will be converted to `--van-slider-bar-height`
const themeVars = {
const themeVars = reactive({
rateIconFullColor: '#07c160',
sliderBarHeight: '4px',
sliderButtonWidth: '20px',
@ -150,7 +150,7 @@ export default {
sliderActiveBackground: '#07c160',
buttonPrimaryBackground: '#07c160',
buttonPrimaryBorderColor: '#07c160',
};
});
return {
rate,
@ -197,13 +197,13 @@ Take the `buttonPrimaryBackground` variable below as an example, the value will
```
```js
import { ref } from 'vue';
import { ref, reactive } from 'vue';
export default {
setup() {
const themeVars = { buttonPrimaryBackground: 'red' };
const themeVarsDark = { buttonPrimaryBackground: 'blue' };
const themeVarsLight = { buttonPrimaryBackground: 'green' };
const themeVars = reactive({ buttonPrimaryBackground: 'red' });
const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });
const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });
return {
themeVars,

14
packages/vant/src/config-provider/README.zh-CN.md
View File

@ -131,7 +131,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
```
```js
import { ref } from 'vue';
import { ref, reactive } from 'vue';
export default {
setup() {
@ -140,7 +140,7 @@ export default {
// themeVars 内的值会被转换成对应 CSS 变量
// 比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
const themeVars = {
const themeVars = reactive({
rateIconFullColor: '#07c160',
sliderBarHeight: '4px',
sliderButtonWidth: '20px',
@ -148,7 +148,7 @@ export default {
sliderActiveBackground: '#07c160',
buttonPrimaryBackground: '#07c160',
buttonPrimaryBorderColor: '#07c160',
};
});
return {
rate,
@ -195,13 +195,13 @@ const themeVars: ConfigProviderThemeVars = {
```
```js
import { ref } from 'vue';
import { ref, reactive } from 'vue';
export default {
setup() {
const themeVars = { buttonPrimaryBackground: 'red' };
const themeVarsDark = { buttonPrimaryBackground: 'blue' };
const themeVarsLight = { buttonPrimaryBackground: 'green' };
const themeVars = reactive({ buttonPrimaryBackground: 'red' });
const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });
const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });
return {
themeVars,