使用vue3+draggable实现自定义组件库（盖中盖版本）

最新推荐文章于 2024-08-09 11:26:56 发布

是Pang不是Bang

最新推荐文章于 2024-08-09 11:26:56 发布

阅读量373

点赞数

文章标签： vue.js javascript android

本文链接：https://blog.csdn.net/weixin_51680049/article/details/130226269

版权

本文介绍了如何使用Vue3结合draggable库，实现一个具有模块添加、自定义大小、拖拽等交互功能的自定义组件库。读者可以通过复制代码进行实践，同时欢迎反馈改进意见。

摘要由CSDN通过智能技术生成

功能描述：能够实现模块的添加、自定义大小、拖拽、等交互具体效果建议直接cv以下代码去查看就好有什么错误或者可以改进的地方欢迎联系笔者大家共同进步！！

<template>
  <div class="parentBox">
    <div class="itxst">
      <div class="group">
        <draggable
          v-model="group"
          ghost-class="ghost"
          handle=".move"
          filter=".forbid"
          :force-fallback="true"
          chosen-class="chosenClass"
          animation="300"
          @start="onStart"
          @end="onEnd"
          group="group1"
          :fallback-class="true"
          :fallback-on-body="true"
          :touch-start-threshold="50"
          :fallback-tolerance="50"
          :move="onMove"
          class="draggablesty"
          item-key="id"
        >
          <template #item="{ element }">
            <div class="move item" :id="element.idname" @click="moduledb">
              <span class="icon" @mousedown="mouseScale"></span>
            </div>
          </template>
        </draggable>
      </div>
    </div>
    <div class="moduleBox">
      <div class="modulesbox">
        <div class="title">全局组件设置</div>
        <div class="editbox">
          <a-button type="primary" size="small" @click="addModule">
            <template #icon><PlusOutlined /></template>
            添加组件
          </a-button>
          <div class="editstyle">
            <span>宽高百分比</span>
            <div class="sliderstyle">
              <div class="sliderflex">
                <span