Commit 6b71b6f

committed

refactor: dark mode toggle with computed props

1 parent a2ef49d commit 6b71b6fCopy full SHA for 6b71b6f

File tree

1 file changed

-16

lines changed

src/pages
- index.vue

1 file changed

-16

lines changed

`‎src/pages/index.vue‎`

Lines changed: 9 additions & 16 deletions

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,11 @@ import { languageColumns, locale } from '@/utils/i18n'`
`4`	`4`
`5`	`5`	`const { t } = useI18n()`
`6`	`6`
	`7`	`+const checked = computed({`
	`8`	`+ get: () => isDark.value,`
	`9`	`+ set: () => toggleDark(),`
	`10`	`+})`
	`11`	`+`
`7`	`12`	`const menuItems = computed(() => ([`
`8`	`13`	`{ title: t('menus.mockGuide'), route: 'mock' },`
`9`	`14`	`{ title: t('menus.echartsDemo'), route: 'charts' },`
`@@ -22,41 +27,29 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {`
`22`	`27`	`locale.value = event.selectedOptions[0].value as string`
`23`	`28`	`showLanguagePicker.value = false`
`24`	`29`	`}`
`25`		`-`
`26`		`-const checked = ref<boolean>(isDark.value)`
`27`		`-`
`28`		`-watchEffect(() => {`
`29`		`- checked.value = isDark.value`
`30`		`-})`
`31`		`-`
`32`		`-function toggle(val: boolean) {`
`33`		`- checked.value = val`
`34`		`- toggleDark()`
`35`		`-}`
`36`	`30`	`</script>`
`37`	`31`
`38`	`32`	`<template>`
`39`		`- <van-cell-group :title="t('menus.basicSettings')" :border="false" :inset="true">`
`40`		`- <van-cell center :title="t('menus.darkMode')">`
	`33`	`+ <van-cell-group :title="$t('menus.basicSettings')" :border="false" :inset="true">`
	`34`	`+ <van-cell center :title="$t('menus.darkMode')">`
`41`	`35`	`<template #right-icon>`
`42`	`36`	`<van-switch`
`43`	`37`	`v-model="checked"`
`44`	`38`	`size="20px"`
`45`	`39`	`aria-label="on/off Dark Mode"`
`46`		`- @change="toggle"`
`47`	`40`	`/>`
`48`	`41`	`</template>`
`49`	`42`	`</van-cell>`
`50`	`43`
`51`	`44`	`<van-cell`
`52`	`45`	`is-link`
`53`		`- :title="t('menus.language')"`
	`46`	`+ :title="$t('menus.language')"`
`54`	`47`	`:value="language"`
`55`	`48`	`@click="showLanguagePicker = true"`
`56`	`49`	`/>`
`57`	`50`	`</van-cell-group>`
`58`	`51`
`59`		`- <van-cell-group :title="t('menus.exampleComponents')" :border="false" :inset="true">`
	`52`	`+ <van-cell-group :title="$t('menus.exampleComponents')" :border="false" :inset="true">`
`60`	`53`	`<template v-for="item in menuItems" :key="item.route">`
`61`	`54`	`<van-cell :title="item.title" :to="item.route" is-link />`
`62`	`55`	`</template>`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 6b71b6f

File tree

1 file changed

1 file changed

`‎src/pages/index.vue‎`

0 commit comments