Vue3에서 사용자 정의 대시보드 vue-grid-layout의 드래그 및 크기 조정을 구현하는 방법

1. npm 다운로드 드래그 앤 드롭 라이브러리

npm install vue-grid-layout@3.0.0-beta1 --save

2. vue3은 vue-grid-layout을 사용하여 오류를 보고합니다. external_commonjs_vue_commonjs2_vue_root_Vue_default.a는 생성자가 아닙니다

해결 방법:해당 vue-grid를 다운로드하세요. - 레이아웃 @3.0.0-beta1 버전의 라이브러리. vue-grid-layout은 vue2 버전이지만 vue3 버전을 사용하기 때문에 vue3 종속성 및 관련 구성을 설치해야 합니다

3.

// 将自动注册所有组件为全局组件 import keycloakInit from '@/utils/util.keycloak' import VueGridLayout from 'vue-grid-layout' const app = createApp(App) app.use(store) app.use(router) app.use(ElementPlus) app.use(VueGridLayout) app.mount('#app')

4. 페이지의 구성요소 사용--저장 및 편집 제어

페이지 사용 렌더링:

레이아웃을 클릭하여 드래그 기능을 사용자 정의하세요----렌더링----화살표 드래그 가능 크기 및 위치 :

페이지 코드는 다음과 같습니다.

속성 GridLayout 매개변수와GridItem 매개변수는 공식 홈페이지

위 내용은 Vue3에서 사용자 정의 대시보드 vue-grid-layout의 드래그 및 크기 조정을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!