javascript - VueJs - Vuetify - v-navigation-drawer 与智能手机的迷你变体
问题描述
我想在屏幕尺寸较小时对 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 在智能手机上成为迷你版的提示。
解决方案
mounted() {
if (
this.$vuetify.breakpoint.name === "md" ||
this.$vuetify.breakpoint.name === "sm" ||
this.$vuetify.breakpoint.name === "xs"
) {
this.mini = true;
}
解决了
推荐阅读
- java - Spring 注入 SessionFactory 或 EntityManagerFactory 而不是 EntityManager
- python - 将 keras 模型输入馈送到输出层
- php - 如何访问 php 对象中的数据
- javascript - 如何针对 HackerRank 的欺诈活动通知问题优化代码
- javascript - 具有对象 JavaScript 的数组的对称差异
- multithreading - 多线程问题 - 不理解 printf 的概念是如何在并发中实现的
- razor-components - 使用 Action 调用 RenderComponent 时出现 ArgumentNullException
- sql-server - SQL 或 PL/pgSQL 用于以下查询以获得更好的性能
- python - 试图编写一个函数来返回 n 中可被 m 整除的位数——输出过多——Python
- mysql - 在 3 列上进行 GROUP BY 以及 IFNULL() 在 MySQL 查询中重复月份名称