blog-client/layouts/default.vue

<template lang="pug">
.content
  #loading.allSpinner
    .spinner
      .bounce1
      .bounce2
      .bounce3
  .container
    header
      .header
        .svg(@click='showLeftMenu')
          svg(style='width: 25px; height:25px', viewBox='0 0 1024 1024', version='1.1', xmlns='http://www.w3.org/2000/svg', width='200', height='200')
            path(d='M192 482l640 0 0 64-640 0 0-64Z')
            path(d='M192 290l640 0 0 64-640 0 0-64Z')
            path(d='M192 674l640 0 0 64-640 0 0-64Z')
        nuxt-link(to='/')
          h1.title
            | 轶哥
    .page-container
      #LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone")
        LeftContent
      #rightContent(@click='showLeftMenu(false)')
        nuxt
        Footer
  v-dialog
</template>

<script>
import LeftContent from '~/components/LeftContent'
import Footer from '~/components/Footer'

export default {
  components: {
    LeftContent,
    Footer
  },
  data () {
    return {
      showLeftMenuValue: 'block',
      isPhone: ''
    }
  },
  mounted () {
    const phoneStyle = 'height: 100%; position: fixed; top: 70px; background-color: #fff; z-index:9999; overflow: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch;'
    if (document.body.clientWidth > 768) {
      this.showLeftMenuValue = 'block'
      this.isPhone = ''
    } else {
      this.showLeftMenuValue = 'none'
      this.isPhone = phoneStyle
    }

    window.onresize = () => {
      if (document.body.clientWidth > 768) {
        this.showLeftMenuValue = 'block'
        this.isPhone = ''
      } else {
        this.showLeftMenuValue = 'none'
        this.isPhone = phoneStyle
      }
    }
  },
  methods: {
    showLeftMenu (show) {
      if (this.showLeftMenuValue === 'block' || show === false) {
        this.showLeftMenuValue = 'none'
      } else {
        this.showLeftMenuValue = 'block'
      }
    }
  }
}
</script>