스크립트 셋업 구문을 사용하여 Vuetify 2 브레이크 포인트를 사용하는 방법

by

현재 Vue 인스턴스를 가져오고 $vuetify 개체에서 모든 중단점과 다른 속성을 가져옵니다.

제 문제는…breakpoints화면 크기를 변경한 후 속성이 업데이트되지 않습니다.반응하지 않아요

계산한 것을 사용해 보았지만, 실제로는 변경되지 않습니다.

import { getCurrentInstance } from 'vue'
const vuetify = computed(() => (getCurrentInstance()?.proxy as any).$vuetify);

사용방법$vuetify.breakpointsVue 3 옵션 구문의 경우와 마찬가지로 화면 크기에 따라 변경합니다.this.$vuetify.breakpoints– 스크립트 셋업 구문(Composition API)을 사용하여 Vue 2에서 3으로 업그레이드합니다.

감사해요.



질문에 대한 답변



다음과 같이 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 }}