Блог

Я хотел бы иметь отзывчивый drawer , поэтому попытался написать код в соответствии с документами Quasar, однако его размер не был изменен должным образом при изменении размера экрана. Для того, чтобы решить эту проблему, я использовал computed в script . Я думаю , что из-за этого computed функция drawerClick не работает.

Когда ящик включен minimode и нажато одно из меню , меню должно быть расширено, но проблема в том, что оно никогда не расширяется.

шаблон

 <template>
  <q-drawer
    v-model="drawer"
    show-if-above
    :mini="!drawer || miniState || miniStatus"
    @click.capture="drawerClick"
    :width="220"
    :breakpoint="500"
    bordered
    :content-style="{ backgroundColor: '#f5f7f9' }"
    id="side-menu"
  >
    <q-scroll-area class="fit">
      <q-list padding>
        <q-btn v-if="!miniState" flat left class="logo-btn">
          <img src="~assets/os_logo.png" width="144px" height="24px" contain />
        </q-btn>
        <q-btn v-else flat left>
          <img src="~assets/os_logo_no_text.png" width="24px" contain />
        </q-btn>

        <q-expansion-item
          default-opened
          v-for="(menu, index) in menus"
          header-class="header-bg text-black"
          expand-icon-class="text-gray"
        >
          <q-expansion-item
            v-for="(sub, index) in menu.subMenus"
            :key="index"
            :label="sub.title"
            expand-icon="none"
            class="sub-content"
            :to="{ name: sub.link }"
          />
        </q-expansion-item>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>
 

скрипт

 <script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'SideMenu',
  data() {
    return {
      drawer: false,
      miniStatus: false,
      switchToMini: 700
    };
  },
  computed: {
    miniState: function() {
      return this.$q.screen.width < this.switchToMini;
    }
  },
  methods: {
    drawerClick(e) {
      if (this.miniStatus) {
        this.miniStatus = false;
        e.stopPropagation();
      }
    }
  }
});
</script>
 

Я лучше объяснил здесь, на этом изображении
[1]: https://i.stack.imgur.com/PqYoc.png