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 ()

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
packages/vant/src/config-provider
README.mdREADME.zh-CN.md

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

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

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

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