VueJs - Vuetify - v-navigation-drawer 与智能手机的迷你变体

Posted 2023-02-23

【中文标题】VueJs - Vuetify - v-navigation-drawer 与智能手机的迷你变体

【英文标题】：VueJs - Vuetify - v-navigation-drawer with mini-variant for smartphone

【发布时间】：2020-08-26 20:03:50

【问题描述】：

我想在屏幕尺寸较小时对 v-navigation-drawer 应用迷你变体，因此到目前为止我有以下内容：

<template  >
  <v-app id="inpire">
    <div class="back">
      <v-app-bar app>
        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
        <v-spacer></v-spacer>
        <h1>selectedMethod</h1>
      </v-app-bar>

      <v-navigation-drawer v-model="drawer" src="./assets/bg.png" green app :mini-variant="mini">
        <v-list-item
          class="y"
          v-for="item in items"
          :key="item.unidade"
          :to="item.link"
          @click="change(item.unidade)"
        >item.unidade</v-list-item>
      </v-navigation-drawer>
      <v-content id="inspire">
        <router-view :dcsi="dcsi" :ipe="ipe" :rt="rt" :key="compKey"></router-view>
      </v-content>
    </div>
  </v-app>
</template>

<script>
export default 
  name: "App",

  data: () => (
    items: [
       unidade: "IPE", link: "/ipe" ,
       unidade: "DCSI", link: "/dcsi" ,
       unidade: "RT", link: "/rt" 
    ],
    drawer: false,
    selectedMethod: "",

    unidade: "",
    compKey: 0,
  methods: 
    change(val) 
      this.selectedMethod = val;
      this.cKey();
    ,
    cKey() 
      this.compKey += 1;
      console.log(this.compKey);
    
  ,
  watch: 
    "$route.params.uni": function() 
      this.cKey();

      console.log(this.$route.params.uni);
      console.log(this.props);
    
  ,
  computed: 
    mini() 
      switch (this.$vuetify.breakpoint.name) 
        case "xs":
          return true;
        case "sm":
          return true;
        case "md":
          return true;
        case "lg":
          return false;
        case "xl":
          return false;
      
    
  
;
</script>
<style lang="stylus" scoped>
#inspire 
  background: require('./assets/mg1.jpg') no-repeat center center;


.y 
  color: green;

</style>

作为计算属性，我编写了 mini()，它根据屏幕大小返回 true 或 false。 但我收到以下错误“162:9 错误预计会在“迷你”计算属性中返回一个值”。 我不明白为什么，因为它返回一个布尔值。 我还尝试将“mini-variant-md-and-down”作为道具添加到导航抽屉中，它没有返回任何错误但也没有工作。 欢迎任何关于使 v-navigation-drawer 在智能手机上成为迷你版的提示。

【参考方案1】：

mounted() 
    if (
      this.$vuetify.breakpoint.name === "md" ||
      this.$vuetify.breakpoint.name === "sm" ||
      this.$vuetify.breakpoint.name === "xs"
    ) 
      this.mini = true;
    

解决了

【讨论】：

但这不是仅在页面加载时有效，并且在调整浏览器大小时中断？你从@tao ***.com/a/56467354/171456看到这个答案@