如何使用脚本设置语法的Vuetify 2断点？

Question

我确实获得了Vue的当前实例，并使用所有断点和其他属性从其中获取了$vuetify对象。

我的问题是，在更改屏幕大小后，breakpoints属性不会更新。这不是被动反应。

我尝试过使用computed来实现它，实际上它并没有改变：

import { getCurrentInstance } from 'vue'

const vuetify = computed(() => (getCurrentInstance()?.proxy as any).$vuetify);

我如何使用$vuetify.breakpoints并根据屏幕大小(就像Vue 3选项语法：this.$vuetify.breakpoints )改变它，我正在使用脚本设置语法(Composition )从Vue 2升级到3。

谢谢。

Answer 1

您可以像这样使useVuetify可组合：

 // @composables/useVuetify
 import { getCurrentInstance } from 'vue';

  export const useVuetify = () => {
   const vm = getCurrentInstance();
   return vm.proxy?.$vuetify || undefined;
 }

然后像这样使用它：

 // Your component
 const vuetify = useVuetify();
 const currentBreakpointName = computed(() => vuetify.breakpoint.name);

在脚本中，您需要与.value：currentBreakpointName.value一起使用它

在模板中，您不需要.value：v-if="currentBreakpointName === 'xl'"或:value="currentBreakpointName"或简单的{{ currentBreakpointName }}