test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-03 12:38:34 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

用 script setup 语法糖重写

Browse Source
This commit is contained in:
hooray 2021-09-07 14:40:20 +08:00
parent 12f0019a65
commit bc967523e1
1 changed files with 58 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/App.vue
View File

@ -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>