Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
更新時間：2023年03月09日 11:57:46 作者：瑰
這篇文章主要介紹了Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
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 is not a constructor
解決方案: vue3版本記得下載對應(yīng) vue-grid-layout@3.0.0-beta1版本的庫，因為vue-grid-layout是vue2版本的，但用的是vue3版本，所以要安裝vue3的依賴和相關(guān)配置
3. 在main.js中注冊
// 將自動注冊所有組件為全局組件
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參數(shù) 和 GridItem參數(shù) 官網(wǎng)有詳細介紹
<template>
<div class="nav-wrapper-b">
<div class="bar-title-b">
{{getChangeLine + ' ' + barTitle}}
</div>
<div class="time-b">
<span style="margin-left: 20px">{{ date }} {{ time }}</span>
<div style="display: inline-block;position: absolute;right: 12%;">
<el-button v-if="isEditDraggable"
type="success"
size="small"
@click="saveDragDataHome">保存
</el-button>
<el-button v-else
type="primary"
size="small"
@click="editDragDataHome">布局
</el-button>
</div>
</div>
</div>
<div class="home-container-b">
<!--********************** 實現(xiàn)自定義組件 *********************-->
<div class="drag-body" :class="isEditDraggable ? 'drag-body-edit' : ''">
<grid-layout :layout.sync="layoutDraggableList"
:col-num="100"
:row-height="5"
:is-draggable="draggableLayout"
:is-resizable="resizableLayout"
:vertical-compact="true"
:use-css-transforms="true">
<grid-item v-for="item in layoutDraggableList"
:static="false"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
style="overflow: auto">
<!--測試組件-->
<div class="layout-component top-left-first-components"
v-if="item.i == 'topLeftFirst'">
<box-container-is>
00001
</box-container-is>
</div>
<!--前五組件-->
<div class="layout-component"
v-if="item.i == 'topLeftSecond'">
<box-container :boxTitle="'測試1'">
00002
</box-container>
</div>
<!--前五-->
<div class="layout-component"
v-if="item.i == 'topLeftThird'">
<box-container :boxTitle="'測試2'">
00003
</box-container>
</div>
<!--信息組件-->
<div class="layout-component"
v-if="item.i == 'topRightFirst'">
<box-container-is>
00004
</box-container-is>
</div>
<!--組件-->
<div class="layout-component"
v-if="item.i == 'topRightSecond'">
<box-container>
<topRightSecondBHome></topRightSecondBHome>
</box-container>
</div>
<!--組件-->
<div class="layout-component"
v-if="item.i == 'topRightThird'">
<box-container-is>
<topRightThirdBHome></topRightThirdBHome>
</box-container-is>
</div>
</grid-item>
</grid-layout>
</div>
</div>
</template>
<script setup>
import emitter from '@/utils/eventbus'
import {getDate, getTime, getTimeHours} from "@/utils/date";
import {useRoute, useRouter} from "vue-router";
import boxContainer from "@/components/boxContainer/index";
import boxContainerIs from "@/components/boxContainer/index1";
import {
workOrderLine,
topRightSecondBHome,
topRightThirdBHome,
} from "./components";
import {computed, ref} from "vue";
import {getCurrentInstance, nextTick} from "@vue/runtime-core";
import {onBeforeUnmount, onMounted, watch} from "vue";
import {saveTemplateApi} from '@/api/workOrderLineApi'
import {ElMessage} from "element-plus";
const {proxy} = getCurrentInstance()
//年月日
const date = ref(getDate());
//時分秒
const time = ref(getTime());
const getChangeLine = ref('')
const hours = ref(getTimeHours())
const barTitle = ref("")
const router = useRouter();
/*____________________________主頁拖拽布局開始_______________________________*/
let isEditDraggable = ref(false)
const draggableLayout = ref(false)
const resizableLayout = ref(false)
const layoutDraggableList = ref([])
//點擊編輯布局
function editDragDataHome() {
isEditDraggable.value = true
}
//保存布局
function saveDragDataHome() {
isEditDraggable.value = false
console.log(layoutDraggableList.value)
saveTemplateApi(layoutDraggableList.value).then(response => {
if (response.code == 200) {
ElMessage({
message: '模板布局已保存成功',
type: 'success',
duration: 6 * 1000
})
}
})
}
/*_____________________________主頁拖拽布局結(jié)束______________________________*/
//模擬后端請求到的數(shù)據(jù)
let demoData = ref({
"id": 162,
"subjectId": 161,
"name": "主頁",
"title": "生產(chǎn)分析",
"description": "第一個看板菜單信息",
"templateList": [
{
"id": 163,
"titleName": "人員信息",
"disabled": true,
"i": "topLeftFirst",
"x": 0,
"y": 0,
"w": 41,
"h": 10,
"menuId": 162
},
{
"id": 164,
"titleName": "前五",
"disabled": true,
"i": "topLeftSecond",
"x": 0,
"y": 10,
"w": 41,
"h": 21,
"menuId": 162
},
{
"id": 165,
"titleName": "吸嘴-拋料率前五",
"disabled": true,
"i": "topLeftThird",
"x": 0,
"y": 31,
"w": 41,
"h": 21,
"menuId": 162
},
{
"id": 166,
"titleName": "",
"disabled": true,
"i": "topRightFirst",
"x": 41,
"y": 0,
"w": 59,
"h": 10,
"menuId": 162
},
{
"id": 167,
"titleName": "",
"disabled": true,
"i": "topRightSecond",
"x": 41,
"y": 10,
"w": 59,
"h": 23,
"menuId": 162
},
{
"id": 168,
"titleName": "",
"disabled": true,
"i": "topRightThird",
"x": 41,
"y": 33,
"w": 59,
"h": 19,
"menuId": 162
}
]
})
initialHeightFun(demoData.value)
//根據(jù)高度進行調(diào)整尺寸
function initialHeightFun(data) {
nextTick(() => {
layoutDraggableList.value = data.templateList
barTitle.value = data.title
})
}
onBeforeUnmount(() => {})
//監(jiān)聽拖拽功能
watch(isEditDraggable, (res) => {
draggableLayout.value = !draggableLayout.value;
resizableLayout.value = !resizableLayout.value;
})
</script>
<style lang="scss" scoped>
/*----------------拖拽樣式開始----------------*/
.drag-body {
width: 100%;
height: 100%;
}
.layout-component {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.layout-component-low-warning-second {
width: 95%;
height: 100%;
margin-right: 1%;
float: left;
}
.layout-component-low-warning-text {
width: 4%;
height: 100%;
float: right;
}
.layout-component-low-throwing-second {
width: 100%;
height: 100%;
}
.drag-body-edit {
.vue-grid-item:not(.vue-grid-placeholder) {
outline: 2px solid rgba(255, 96, 28, 0.71);
}
}
.vue-grid-item {
box-sizing: border-box !important;
}
.vue-grid-layout {
background: url("~@/assets/image/bg1.png");
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
::v-deep .vue-resizable-handle {
background: url("~@/assets/image/ic_show_more.png") no-repeat 100% 100%;
padding: 0 3px 3px 0;
background-origin: content-box;
-webkit-box-sizing: border-box;
position: absolute;
width: 45px;
height: 45px;
bottom: 0;
right: 0;
}
.vue-grid-item:not(.vue-grid-placeholder) {
//border: 1px solid #409eff;
color: #ffffff;
}
.vue-grid-item .resizing {
opacity: 0.9;
}
.vue-grid-item .static {
background: transparent;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
.vue-grid-item .no-drag {
height: 100%;
width: 100%;
}
.vue-grid-item .minMax {
font-size: 12px;
}
.vue-grid-item .add {
cursor: pointer;
}
/*----------------拖拽樣式結(jié)束----------------*/
.nav-wrapper-b {
height: 60px;
line-height: 60px;
width: 100%;
background: url("~@/assets/image/top.png") no-repeat;
background-size: 100% 100%;
text-align: center;
position: relative;
color: #d5dfe8;
font-family: "黑體";
.bar-title-b {
font-size: 32px;
color: #ffffff;
font-weight: bolder;
}
.time-b {
position: absolute;
right: 1%;
top: 50%;
transform: translateY(-35%);
font-family: "Time Number";
font-weight: bold;
font-size: 29px;
width: 35%;
}
.mapChoose-b {
position: absolute;
left: 22px;
bottom: 15px;
color: #eee;
}
}
.home-container-b {
width: 100%;
height: 100%;
position: relative;
margin-top: 0;
}
.nav_btn {
position: absolute;
top: 5px;
width: 50%;
height: auto;
}
</style>
到此這篇關(guān)于Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法的文章就介紹到這了,更多相關(guān)Vue3拖拽和縮放自定義看板 vue-grid-layout內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了Vue3項目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
虛擬DOM是一種用JavaScript對象來描述真實DOM的技術(shù),通過diff算法實現(xiàn)高效的DOM更新,提高頁面性能,Vue通過render函數(shù)和VNode實現(xiàn)虛擬DOM,結(jié)合diff算法減少DOM操作,提升用戶體驗2024-12-12
Vue.js中自定義Markdown插件實現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個插件來解析<references>標簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js是一個流行的前端框架,以其易于學(xué)習(xí)和使用而聞名,在Vue3中,借助于Composition API和新的setup語法糖,模板和渲染函數(shù)的使用變得更加靈活和強大,在這篇博客中,我們將深入探討Vue3是如何處理模板和渲染函數(shù)的,并通過示例代碼來展示如何有效利用這些功能2024-11-11
這篇文章主要介紹了Vue3 中的數(shù)據(jù)偵測的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Elementui按鈕設(shè)置默認選中狀態(tài)的實現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認選中狀態(tài)的實現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,有需要的小伙伴可以參考一下2023-10-10
這篇文章主要介紹了基于Vue-cli的一套代碼支持多個項目的方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03