Vue+ElementUI实现dialog组件可拖拽且底层可点击

已经2024年了，有些功能还是老系统好用，这不，有客户要求弹出dialog时可拖拽且底层可点击，因为这样可以在底层把需要的数据复制出来，在dialog中进行搜索！！！（不得不说这个功能的确好用，但是开发vue项目我还没有遇到这样过的需求，也只能硬着头皮网上查）

我使用的是elementUI实现，话不多说，看代码：
实现dialog拖拽和去掉modal蒙层很简单，element的示例就有

<el-dialog class="search-dialog" :modal="false" :close-on-click-modal="false" draggable v-model="searchDialogVisible" title="搜索设备" width="50%">
            ......dialog中的UI界面省略
          </el-dialog>

关键字：
1、:modal="false"：去掉蒙层
2、:close-on-click-modal="false"：点击蒙层时关闭dialog设为false
3、draggable：实现拖拽

这样设置拖拽效果就出来了，但是新问题出现了，点击底层时无法复制数据！！！
网上查了很多资料，最后成功解决，直接上代码：

// 实现dialog可拖拽且底层可点击
:deep(:has(> .el-overlay-dialog .search-dialog)) {
  pointer-events: none !important;
}

:deep(.el-overlay-dialog) {
  pointer-events: none !important;

  .search-dialog {
    .el-dialog__header,
    .el-dialog__body,
    .el-dialog__footer {
      pointer-events: auto !important;
    }
  }
}

这个是我的代码，因为我发现我不用deep深层选择器解决不了问题，因为我用的是vue3，提示要用:deep替换掉:v-deep，所以是这样用，同理用:v-deep也是可以的吧。

下面是我网上找的例子，附上链接: vue3+element Plus实现弹框的拖拽、可点击底层页面功能

关键：通过css来实现，主要是"pointer-events"、":has"，可以找专业的文章看这个知识点，学习无止境！fighting