VueJs - Vuetify - 带有用于智能手机的迷你变体的 v-navigation-drawer
VueJs - Vuetify - v-navigation-drawer with mini-variant for smartphone
我想在屏幕尺寸较小时将 mini-variant 应用于 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() ,它 return 是真还是假取决于屏幕尺寸。
但我收到以下错误“162:9 错误预期 return "mini" 中的值计算 属性”。
我不明白为什么,因为它是 returning 布尔值。
我还尝试将 "mini-variant-md-and-down" 作为道具添加到导航抽屉中,但没有 return 任何错误,但也没有用。
欢迎任何让 v-navigation-drawer 在智能手机上变得迷你的提示。
mounted() {
if (
this.$vuetify.breakpoint.name === "md" ||
this.$vuetify.breakpoint.name === "sm" ||
this.$vuetify.breakpoint.name === "xs"
) {
this.mini = true;
}
解决了
我想在屏幕尺寸较小时将 mini-variant 应用于 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() ,它 return 是真还是假取决于屏幕尺寸。 但我收到以下错误“162:9 错误预期 return "mini" 中的值计算 属性”。 我不明白为什么,因为它是 returning 布尔值。 我还尝试将 "mini-variant-md-and-down" 作为道具添加到导航抽屉中,但没有 return 任何错误,但也没有用。 欢迎任何让 v-navigation-drawer 在智能手机上变得迷你的提示。
mounted() {
if (
this.$vuetify.breakpoint.name === "md" ||
this.$vuetify.breakpoint.name === "sm" ||
this.$vuetify.breakpoint.name === "xs"
) {
this.mini = true;
}
解决了