mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
modify(debug tag): change router to localstorage
This commit is contained in:
parent
066c4fc35e
commit
b79fdcee97
@ -94,7 +94,7 @@ export default {
|
||||
methods: {
|
||||
handleStartClick () {
|
||||
this.$router.push(
|
||||
/^(\/[^/]+){3}/.exec(this.$route.path)[0] + '/doc/start'
|
||||
/^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
|
||||
)
|
||||
},
|
||||
handleTitleMouseEnter () {
|
||||
|
@ -6,6 +6,7 @@
|
||||
:lang="lang"
|
||||
:items="flattenedItems"
|
||||
:env="env"
|
||||
:mode="mode"
|
||||
@lang-change="handleLangChange"
|
||||
@mode-change="handleModeChange"
|
||||
/>
|
||||
@ -21,6 +22,7 @@
|
||||
import DocHeader from './header.vue'
|
||||
import menuOptions from './menuOptions'
|
||||
import { i18n } from './init'
|
||||
import { setState } from './store'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -38,6 +40,12 @@ export default {
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
this.$i18n.locale = to.params.lang
|
||||
next()
|
||||
this.mode = localStorage.getItem('mode')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mode: localStorage.getItem('mode') ? localStorage.getItem('mode') : 'debug'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
env () {
|
||||
@ -74,14 +82,6 @@ export default {
|
||||
set (theme) {
|
||||
this.$router.push(changeThemeInPath(this.$route.fullPath, theme))
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
get () {
|
||||
return this.$route.params.mode === 'debug' ? 'debug' : 'common'
|
||||
},
|
||||
set (mode) {
|
||||
this.$router.push(changeModeInPath(this.$route.fullPath, mode))
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -90,6 +90,8 @@ export default {
|
||||
},
|
||||
handleModeChange (mode) {
|
||||
this.mode = mode
|
||||
localStorage.setItem('mode', mode)
|
||||
setState(mode)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -103,11 +105,6 @@ function changeThemeInPath (path, theme) {
|
||||
const themeReg = /(^\/[^/]+\/)([^/]+)/
|
||||
return path.replace(themeReg, '$1' + theme)
|
||||
}
|
||||
|
||||
function changeModeInPath (path, mode) {
|
||||
const modeReg = /(^\/[^/]+\/[^/]+\/)([^/]+)/
|
||||
return path.replace(modeReg, '$1' + mode)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -99,13 +99,16 @@ export default {
|
||||
env: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchInputValue: '',
|
||||
version,
|
||||
mode: 'debug',
|
||||
themeOptions: {
|
||||
dark: {
|
||||
label: 'Light',
|
||||
@ -175,18 +178,6 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
// modeOptions () {
|
||||
// return [
|
||||
// {
|
||||
// label: this.$t('common'),
|
||||
// next: 'common'
|
||||
// },
|
||||
// {
|
||||
// label: this.$t('debug'),
|
||||
// next: 'debug'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
handleLogoClick () {
|
||||
@ -195,7 +186,7 @@ export default {
|
||||
return
|
||||
}
|
||||
this.$router.push(
|
||||
/^(\/[^/]+){3}/.exec(this.$route.path)[0]
|
||||
/^(\/[^/]+){2}/.exec(this.$route.path)[0]
|
||||
)
|
||||
},
|
||||
handleSelect (value) {
|
||||
@ -204,14 +195,14 @@ export default {
|
||||
handleMenuSelect (value) {
|
||||
if (value === 'home') {
|
||||
this.$router.push(
|
||||
/^(\/[^/]+){3}/.exec(this.$route.path)[0]
|
||||
/^(\/[^/]+){2}/.exec(this.$route.path)[0]
|
||||
)
|
||||
} if (value === 'doc') {
|
||||
if (/^(\/[^/]+){3}\/doc/.test(this.$route.path)) {
|
||||
if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) {
|
||||
|
||||
} else {
|
||||
this.$router.push(
|
||||
/^(\/[^/]+){3}/.exec(this.$route.path)[0] + '/doc/start'
|
||||
/^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -221,8 +212,7 @@ export default {
|
||||
},
|
||||
|
||||
handleModeChange () {
|
||||
this.mode = this.modeOptions[this.mode].next
|
||||
this.$emit('mode-change', this.mode)
|
||||
this.$emit('mode-change', this.modeOptions[this.mode].next)
|
||||
},
|
||||
handleLanguageChange () {
|
||||
this.$emit('lang-change', this.langOptions[this.lang].next)
|
||||
|
106
demo/init.js
106
demo/init.js
@ -234,78 +234,40 @@ const children = [
|
||||
},
|
||||
{ path: '/n-select-debug', component: selectDebug }
|
||||
]
|
||||
let routes = []
|
||||
if (env === 'development') {
|
||||
routes = [
|
||||
{
|
||||
path: '/:lang/:theme/:mode/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/:mode/n-back-top-debug',
|
||||
component: backTopDebug
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/:mode/n-cascader-debug',
|
||||
component: cascaderDebug
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/:mode',
|
||||
component: Entry,
|
||||
children: [
|
||||
{
|
||||
path: '/:lang/:theme/:mode',
|
||||
component: LandingPage,
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/:mode/doc',
|
||||
component: DocEntry,
|
||||
children: withPrefix('/:lang/:theme/:mode/doc', children)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/*',
|
||||
redirect: '/zh-CN/light/debug'
|
||||
}
|
||||
]
|
||||
} else {
|
||||
routes = [
|
||||
{
|
||||
path: '/:lang/:theme/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
path: '/n-back-top-debug',
|
||||
component: backTopDebug
|
||||
},
|
||||
{
|
||||
path: '/n-cascader-debug',
|
||||
component: cascaderDebug
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: Entry,
|
||||
children: [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: LandingPage,
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/doc',
|
||||
component: DocEntry,
|
||||
children: withPrefix('/:lang/:theme/doc', children)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/*',
|
||||
redirect: '/zh-CN/light'
|
||||
}
|
||||
]
|
||||
}
|
||||
const routes = [
|
||||
{
|
||||
path: '/:lang/:theme/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
path: '/n-back-top-debug',
|
||||
component: backTopDebug
|
||||
},
|
||||
{
|
||||
path: '/n-cascader-debug',
|
||||
component: cascaderDebug
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: Entry,
|
||||
children: [
|
||||
{
|
||||
path: '/:lang/:theme',
|
||||
component: LandingPage,
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
path: '/:lang/:theme/doc',
|
||||
component: DocEntry,
|
||||
children: withPrefix('/:lang/:theme/doc', children)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/*',
|
||||
redirect: '/zh-CN/light'
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
|
2573
demo/menuOptions.js
2573
demo/menuOptions.js
File diff suppressed because it is too large
Load Diff
7
demo/store.js
Normal file
7
demo/store.js
Normal file
@ -0,0 +1,7 @@
|
||||
export const state = {
|
||||
mode: localStorage.getItem('mode')
|
||||
}
|
||||
|
||||
export function setState (mode) {
|
||||
state.mode = mode
|
||||
}
|
@ -57,6 +57,7 @@
|
||||
|
||||
<script>
|
||||
import mdCode from '../../src/_icons/md-code'
|
||||
import { state } from '../store'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -74,12 +75,13 @@ export default {
|
||||
controller: {},
|
||||
isShow: true,
|
||||
name: '',
|
||||
isDebug: false
|
||||
isDebug: false,
|
||||
state: state
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mode () {
|
||||
return this.$route.params.mode
|
||||
return this.state.mode
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
Loading…
Reference in New Issue
Block a user