12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
- import { mapState } from 'vuex'
- const mixin = {
- computed: {
- ...mapState({
- layoutMode: state => state.app.layout,
- navTheme: state => state.app.theme,
- primaryColor: state => state.app.color,
- colorWeak: state => state.app.weak,
- fixedHeader: state => state.app.fixedHeader,
- fixSiderbar: state => state.app.fixSiderbar,
- fixSidebar: state => state.app.fixSiderbar,
- contentWidth: state => state.app.contentWidth,
- autoHideHeader: state => state.app.autoHideHeader,
- sidebarOpened: state => state.app.sidebar,
- multiTab: state => state.app.multiTab
- })
- },
- methods: {
- isTopMenu () {
- return this.layoutMode === 'topmenu'
- },
- isSideMenu () {
- return !this.isTopMenu()
- }
- }
- }
- const mixinDevice = {
- computed: {
- ...mapState({
- device: state => state.app.device
- })
- },
- methods: {
- isMobile () {
- return this.device === DEVICE_TYPE.MOBILE
- },
- isDesktop () {
- return this.device === DEVICE_TYPE.DESKTOP
- },
- isTablet () {
- return this.device === DEVICE_TYPE.TABLET
- }
- }
- }
- const AppDeviceEnquire = {
- mounted () {
- const { $store } = this
- deviceEnquire(deviceType => {
- switch (deviceType) {
- case DEVICE_TYPE.DESKTOP:
- $store.commit('TOGGLE_DEVICE', 'desktop')
- $store.dispatch('setSidebar', true)
- break
- case DEVICE_TYPE.TABLET:
- $store.commit('TOGGLE_DEVICE', 'tablet')
- $store.dispatch('setSidebar', false)
- break
- case DEVICE_TYPE.MOBILE:
- default:
- $store.commit('TOGGLE_DEVICE', 'mobile')
- $store.dispatch('setSidebar', true)
- break
- }
- })
- }
- }
- export { mixin, AppDeviceEnquire, mixinDevice }
|