当前位置：首页 > article >正文

vue3 富文本组件（MDEditor）在拖拽组件（vuedraggable）点击功能失效问题

article 2024/12/27 2:58:20

vue3 富文本组件（MDEditor）在拖拽组件（vuedraggable）点击功能失效问题

在这里插入图片描述

问题描述
如上图，将富文本组件放在嵌套在拖拽组件内，富文本组件上方的点击事件都失效了，搞了半天终于搞定了。

原因是：因为点击后，点击拖拽功能阻塞了拖拽区域内任何的点击事件。

解决方案

给拖拽组件添加handle属性，指定可拖拽区域（让只允许在标题栏进行拖拽操作），这样就OK了

如下图
在这里插入图片描述

<div v-if="datas.imageList[0]">
 <el-collapse v-model="activeNames">
    <vuedraggable :list="datas.imageList" item-key="index" :forceFallback="true" handle=".dragableArea"
      :animation="200">
      <template #item="{ element, index }">
        <el-collapse-item>
          <template #title>
            <div class="dragableArea" style="width: 100%;text-align: left;">
              <van-icon class="imgClose" name="close" @click.stop="deleteimg(index)" v-if="index > 0" />
              {{ '图文' + (index + 1) }}
            </div>
          </template>
          <section class="imgList">
            <upload v-model="element.src" />
            <div class="imgText">
              <div>链接设置：</div>
              <el-input v-model="element.link" placeholder="请输入链接"></el-input>
            </div>
          </section>
          <el-form-item label="标题">
            <el-switch v-model="element.isShowTit" />
          </el-form-item>
          <el-form-item label="标题内容" label-position="top">
            <MDEditor :editorHtml="element.titleHtml" />
          </el-form-item>
        </el-collapse-item>
      </template>
    </vuedraggable>
  </el-collapse>
</div>