mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-06 05:57:58 +08:00
用 script setup 语法糖重写
This commit is contained in:
parent
5d06055af8
commit
516fcba5ed
131
src/App.vue
131
src/App.vue
@ -2,79 +2,64 @@
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.settings.mode': {
|
||||
handler() {
|
||||
if (this.$store.state.settings.mode === 'pc') {
|
||||
this.$store.commit('settings/updateThemeSetting', {
|
||||
'sidebarCollapse': this.$store.state.settings.sidebarCollapseLastStatus
|
||||
})
|
||||
} else if (this.$store.state.settings.mode === 'mobile') {
|
||||
this.$store.commit('settings/updateThemeSetting', {
|
||||
'sidebarCollapse': true
|
||||
})
|
||||
}
|
||||
document.body.setAttribute('data-mode', this.$store.state.settings.mode)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'$store.state.settings.menuMode': {
|
||||
handler() {
|
||||
this.setMenuMode()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'$store.state.settings.sidebarCollapse': {
|
||||
handler() {
|
||||
this.setMenuMode()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'$store.state.settings.enableDynamicTitle': {
|
||||
handler() {
|
||||
this.setDocumentTitle()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'$store.state.settings.title': {
|
||||
handler() {
|
||||
this.setDocumentTitle()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
this.$store.commit('settings/setMode', document.documentElement.clientWidth)
|
||||
}
|
||||
window.onresize()
|
||||
},
|
||||
methods: {
|
||||
setDocumentTitle() {
|
||||
if (this.$store.state.settings.enableDynamicTitle && this.$store.state.settings.title) {
|
||||
let title = this.$store.state.settings.title
|
||||
document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
|
||||
} else {
|
||||
document.title = import.meta.env.VITE_APP_TITLE
|
||||
}
|
||||
},
|
||||
setMenuMode() {
|
||||
document.body.removeAttribute('data-sidebar-no-collapse')
|
||||
document.body.removeAttribute('data-sidebar-collapse')
|
||||
if (['side', 'head', 'single'].includes(this.$store.state.settings.menuMode)) {
|
||||
if (this.$store.state.settings.sidebarCollapse) {
|
||||
document.body.setAttribute('data-sidebar-collapse', '')
|
||||
} else {
|
||||
document.body.setAttribute('data-sidebar-no-collapse', '')
|
||||
}
|
||||
}
|
||||
document.body.setAttribute('data-menu-mode', this.$store.state.settings.menuMode)
|
||||
}
|
||||
<script setup>
|
||||
import { watch, onMounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
watch(() => store.state.settings.mode, () => {
|
||||
if (store.state.settings.mode === 'pc') {
|
||||
store.commit('settings/updateThemeSetting', {
|
||||
'sidebarCollapse': store.state.settings.sidebarCollapseLastStatus
|
||||
})
|
||||
} else if (store.state.settings.mode === 'mobile') {
|
||||
store.commit('settings/updateThemeSetting', {
|
||||
'sidebarCollapse': true
|
||||
})
|
||||
}
|
||||
document.body.setAttribute('data-mode', store.state.settings.mode)
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
|
||||
watch([
|
||||
() => store.state.settings.menuMode,
|
||||
() => store.state.settings.sidebarCollapse
|
||||
], () => setMenuMode(), {
|
||||
immediate: true
|
||||
})
|
||||
|
||||
watch([
|
||||
() => store.state.settings.enableDynamicTitle,
|
||||
() => store.state.settings.title
|
||||
], () => setDocumentTitle(), {
|
||||
immediate: true
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
window.onresize = () => {
|
||||
store.commit('settings/setMode', document.documentElement.clientWidth)
|
||||
}
|
||||
window.onresize()
|
||||
})
|
||||
|
||||
function setDocumentTitle() {
|
||||
if (store.state.settings.enableDynamicTitle && store.state.settings.title) {
|
||||
let title = store.state.settings.title
|
||||
document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
|
||||
} else {
|
||||
document.title = import.meta.env.VITE_APP_TITLE
|
||||
}
|
||||
}
|
||||
function setMenuMode() {
|
||||
document.body.removeAttribute('data-sidebar-no-collapse')
|
||||
document.body.removeAttribute('data-sidebar-collapse')
|
||||
if (store.state.settings.sidebarCollapse) {
|
||||
document.body.setAttribute('data-sidebar-collapse', '')
|
||||
} else {
|
||||
document.body.setAttribute('data-sidebar-no-collapse', '')
|
||||
}
|
||||
document.body.setAttribute('data-menu-mode', store.state.settings.menuMode)
|
||||
}
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user