• VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout

    Vue Grid Layout官方文档

    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 is not a constructor

     解决方案: vue3版本记得下载对应 vue-grid-layout@3.0.0-beta1版本的库，因为vue-grid-layout是vue2版本的，但用的是vue3版本，所以要安装vue3的依赖和相关配置

    3.  在main.js中注册

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

    4. 页面中使用组件 -- 控制保存和编辑

    页面使用效果图:

    点击布局进行自定义拖拽功能 ----- 效果图 ----- 箭头处可进行拖拽大小及位置:

     页面代码如下:

    属性 GridLayout参数 和 GridItem参数 官网有详细介绍

    1. <template>
    2.     <div class="nav-wrapper-b">
    3.         <div class="bar-title-b">
    4.             {{getChangeLine + ' ' + barTitle}}
    5.         div>
    6.         <div class="time-b">
    7.             <span style="margin-left: 20px">{{ date }} {{ time }}span>
    8.             <div style="display: inline-block;position: absolute;right: 12%;">
    9.                 <el-button v-if="isEditDraggable"
    10.                            type="success"
    11.                            size="small"
    12.                            @click="saveDragDataHome">保存
    13.                 el-button>
    14.                 <el-button v-else
    15.                            type="primary"
    16.                            size="small"
    17.                            @click="editDragDataHome">布局
    18.                 el-button>
    19.             div>
    20.         div>
    21.     div>
    22.     <div class="home-container-b">
    23.         
    24.         <div class="drag-body" :class="isEditDraggable ? 'drag-body-edit' : ''">
    25.             <grid-layout :layout.sync="layoutDraggableList"
    26.                          :col-num="100"
    27.                          :row-height="5"
    28.                          :is-draggable="draggableLayout"
    29.                          :is-resizable="resizableLayout"
    30.                          :vertical-compact="true"
    31.                          :use-css-transforms="true">
    32.                 <grid-item v-for="item in layoutDraggableList"
    33.                            :static="false"
    34.                            :x="item.x"
    35.                            :y="item.y"
    36.                            :w="item.w"
    37.                            :h="item.h"
    38.                            :i="item.i"
    39.                            style="overflow: auto">
    40.                     
    41.                     <div class="layout-component top-left-first-components"
    42.                          v-if="item.i == 'topLeftFirst'">
    43.                         <box-container-is>
    44.                             00001
    45.                         box-container-is>
    46.                     div>
    47.                     
    48.                     <div class="layout-component"
    49.                          v-if="item.i == 'topLeftSecond'">
    50.                         <box-container :boxTitle="'测试1'">
    51.                             00002
    52.                         box-container>
    53.                     div>
    54.                     
    55.                     <div class="layout-component"
    56.                          v-if="item.i == 'topLeftThird'">
    57.                         <box-container :boxTitle="'测试2'">
    58.                            00003
    59.                         box-container>
    60.                     div>
    61.                     
    62.                     <div class="layout-component"
    63.                          v-if="item.i == 'topRightFirst'">
    64.                         <box-container-is>
    65.                             00004
    66.                         box-container-is>
    67.                     div>
    68.                     
    69.                     <div class="layout-component"
    70.                          v-if="item.i == 'topRightSecond'">
    71.                         <box-container>
    72.                             <topRightSecondBHome>topRightSecondBHome>
    73.                         box-container>
    74.                     div>
    75.                     
    76.                     <div class="layout-component"
    77.                          v-if="item.i == 'topRightThird'">
    78.                         <box-container-is>
    79.                             <topRightThirdBHome>topRightThirdBHome>
    80.                         box-container-is>
    81.                     div>
    82.                 grid-item>
    83.             grid-layout>
    84.         div>
    85.     div>
    86. template>
    87.  
    88. <script setup>
    89.     import emitter from '@/utils/eventbus'
    90.     import {getDate, getTime, getTimeHours} from "@/utils/date";
    91.     import {useRoute, useRouter} from "vue-router";
    92.     import boxContainer from "@/components/boxContainer/index";
    93.     import boxContainerIs from "@/components/boxContainer/index1";
    94.     import {
    95.         workOrderLine,
    96.         topRightSecondBHome,
    97.         topRightThirdBHome,
    98.     } from "./components";
    99.     import {computed, ref} from "vue";
    100.     import {getCurrentInstance, nextTick} from "@vue/runtime-core";
    101.     import {onBeforeUnmount, onMounted, watch} from "vue";
    102.     import {saveTemplateApi} from '@/api/workOrderLineApi'
    103.     import {ElMessage} from "element-plus";
    104.  
    105.     const {proxy} = getCurrentInstance()
    106.     //年月日
    107.     const date = ref(getDate());
    108.     //时分秒
    109.     const time = ref(getTime());
    110.     const getChangeLine = ref('')
    111.     const hours = ref(getTimeHours())
    112.     const barTitle = ref("")
    113.     const router = useRouter();
    114.  
    115.     /*____________________________主页拖拽布局开始_______________________________*/
    116.     let isEditDraggable = ref(false)
    117.     const draggableLayout = ref(false)
    118.     const resizableLayout = ref(false)
    119.     const layoutDraggableList = ref([])
    120.  
    121.     //点击编辑布局
    122.     function editDragDataHome() {
    123.         isEditDraggable.value = true
    124.     }
    125.  
    126.     //保存布局
    127.     function saveDragDataHome() {
    128.         isEditDraggable.value = false
    129.         console.log(layoutDraggableList.value)
    130.         saveTemplateApi(layoutDraggableList.value).then(response => {
    131.             if (response.code == 200) {
    132.                 ElMessage({
    133.                     message: '模板布局已保存成功',
    134.                     type: 'success',
    135.                     duration: 6 * 1000
    136.                 })
    137.             }
    138.         })
    139.     }
    140.  
    141.     /*_____________________________主页拖拽布局结束______________________________*/
    142.  
    143.     //模拟后端请求到的数据
    144.     let demoData = ref({
    145.         "id": 162,
    146.         "subjectId": 161,
    147.         "name": "主页",
    148.         "title": "生产分析",
    149.         "description": "第一个看板菜单信息",
    150.         "templateList": [
    151.             {
    152.                 "id": 163,
    153.                 "titleName": "人员信息",
    154.                 "disabled": true,
    155.                 "i": "topLeftFirst",
    156.                 "x": 0,
    157.                 "y": 0,
    158.                 "w": 41,
    159.                 "h": 10,
    160.                 "menuId": 162
    161.             },
    162.             {
    163.                 "id": 164,
    164.                 "titleName": "前五",
    165.                 "disabled": true,
    166.                 "i": "topLeftSecond",
    167.                 "x": 0,
    168.                 "y": 10,
    169.                 "w": 41,
    170.                 "h": 21,
    171.                 "menuId": 162
    172.             },
    173.             {
    174.                 "id": 165,
    175.                 "titleName": "吸嘴-抛料率前五",
    176.                 "disabled": true,
    177.                 "i": "topLeftThird",
    178.                 "x": 0,
    179.                 "y": 31,
    180.                 "w": 41,
    181.                 "h": 21,
    182.                 "menuId": 162
    183.             },
    184.             {
    185.                 "id": 166,
    186.                 "titleName": "",
    187.                 "disabled": true,
    188.                 "i": "topRightFirst",
    189.                 "x": 41,
    190.                 "y": 0,
    191.                 "w": 59,
    192.                 "h": 10,
    193.                 "menuId": 162
    194.             },
    195.             {
    196.                 "id": 167,
    197.                 "titleName": "",
    198.                 "disabled": true,
    199.                 "i": "topRightSecond",
    200.                 "x": 41,
    201.                 "y": 10,
    202.                 "w": 59,
    203.                 "h": 23,
    204.                 "menuId": 162
    205.             },
    206.             {
    207.                 "id": 168,
    208.                 "titleName": "",
    209.                 "disabled": true,
    210.                 "i": "topRightThird",
    211.                 "x": 41,
    212.                 "y": 33,
    213.                 "w": 59,
    214.                 "h": 19,
    215.                 "menuId": 162
    216.             }
    217.         ]
    218.     })
    219.     initialHeightFun(demoData.value)
    220.  
    221.     //根据高度进行调整尺寸
    222.     function initialHeightFun(data) {
    223.         nextTick(() => {
    224.             layoutDraggableList.value = data.templateList
    225.             barTitle.value = data.title
    226.         })
    227.     }
    228.  
    229.     onBeforeUnmount(() => {})
    230.  
    231.     //监听拖拽功能
    232.     watch(isEditDraggable, (res) => {
    233.         draggableLayout.value = !draggableLayout.value;
    234.         resizableLayout.value = !resizableLayout.value;
    235.     })
    236. script>
    237.  
    238. <style lang="scss" scoped>
    239.     /*----------------拖拽样式开始----------------*/
    240.     .drag-body {
    241.         width: 100%;
    242.         height: 100%;
    243.     }
    244.  
    245.     .layout-component {
    246.         width: 100%;
    247.         height: 100%;
    248.         display: flex;
    249.         flex-wrap: wrap;
    250.         align-content: space-between;
    251.     }
    252.  
    253.     .layout-component-low-warning-second {
    254.         width: 95%;
    255.         height: 100%;
    256.         margin-right: 1%;
    257.         float: left;
    258.     }
    259.  
    260.     .layout-component-low-warning-text {
    261.         width: 4%;
    262.         height: 100%;
    263.         float: right;
    264.     }
    265.  
    266.     .layout-component-low-throwing-second {
    267.         width: 100%;
    268.         height: 100%;
    269.     }
    270.  
    271.     .drag-body-edit {
    272.         .vue-grid-item:not(.vue-grid-placeholder) {
    273.             outline: 2px solid rgba(255, 96, 28, 0.71);
    274.         }
    275.     }
    276.  
    277.     .vue-grid-item {
    278.         box-sizing: border-box !important;
    279.     }
    280.  
    281.     .vue-grid-layout {
    282.         background: url("~@/assets/image/bg1.png");
    283.         -moz-background-size: 100% 100%;
    284.         background-size: 100% 100%;
    285.     }
    286.  
    287.     ::v-deep .vue-resizable-handle {
    288.         background: url("~@/assets/image/ic_show_more.png") no-repeat 100% 100%;
    289.         padding: 0 3px 3px 0;
    290.         background-origin: content-box;
    291.         -webkit-box-sizing: border-box;
    292.         position: absolute;
    293.         width: 45px;
    294.         height: 45px;
    295.         bottom: 0;
    296.         right: 0;
    297.     }
    298.  
    299.     .vue-grid-item:not(.vue-grid-placeholder) {
    300.         //border: 1px solid #409eff;
    301.         color: #ffffff;
    302.     }
    303.  
    304.     .vue-grid-item .resizing {
    305.         opacity: 0.9;
    306.     }
    307.  
    308.     .vue-grid-item .static {
    309.         background: transparent;
    310.     }
    311.  
    312.     .vue-grid-item .text {
    313.         font-size: 24px;
    314.         text-align: center;
    315.         position: absolute;
    316.         top: 0;
    317.         bottom: 0;
    318.         left: 0;
    319.         right: 0;
    320.         margin: auto;
    321.         height: 100%;
    322.         width: 100%;
    323.     }
    324.  
    325.     .vue-grid-item .no-drag {
    326.         height: 100%;
    327.         width: 100%;
    328.     }
    329.  
    330.     .vue-grid-item .minMax {
    331.         font-size: 12px;
    332.     }
    333.  
    334.     .vue-grid-item .add {
    335.         cursor: pointer;
    336.     }
    337.  
    338.     /*----------------拖拽样式结束----------------*/
    339.  
    340.     .nav-wrapper-b {
    341.         height: 60px;
    342.         line-height: 60px;
    343.         width: 100%;
    344.         background: url("~@/assets/image/top.png") no-repeat;
    345.         background-size: 100% 100%;
    346.         text-align: center;
    347.         position: relative;
    348.         color: #d5dfe8;
    349.         font-family: "黑体";
    350.  
    351.         .bar-title-b {
    352.             font-size: 32px;
    353.             color: #ffffff;
    354.             font-weight: bolder;
    355.         }
    356.  
    357.         .time-b {
    358.             position: absolute;
    359.             right: 1%;
    360.             top: 50%;
    361.             transform: translateY(-35%);
    362.             font-family: "Time Number";
    363.             font-weight: bold;
    364.             font-size: 29px;
    365.             width: 35%;
    366.         }
    367.  
    368.         .mapChoose-b {
    369.             position: absolute;
    370.             left: 22px;
    371.             bottom: 15px;
    372.             color: #eee;
    373.         }
    374.     }
    375.  
    376.     .home-container-b {
    377.         width: 100%;
    378.         height: 100%;
    379.         position: relative;
    380.         margin-top: 0;
    381.     }
    382.  
    383.     .nav_btn {
    384.         position: absolute;
    385.         top: 5px;
    386.         width: 50%;
    387.         height: auto;
    388.     }
    389. style>

  • 相关阅读:
    微软正式发布：.NET Aspire 云原生开发框架
    学习学习之高效学习
    ubuntu-server部署hive-part2-安装hadoop
    设计模式再探——原型模式
    全国400电话办理，简单步骤帮您申请成功
    ​一文梳理ICML 2022中图机器学习热点和趋势
    继承框架 - 秒杀接口实现
    麒麟软件副总裁李震宁：中国开源社区是操作系统破局的土壤
    麒麟KYLINOS桌面操作系统2303上安装tigervnc
    leetcode算法题--求1+2+…+n
  • 原文地址：https://blog.csdn.net/lovexiuwei/article/details/127916659