自定义一个可拖拽、没有遮罩的el-dialog

最新推荐文章于 2025-09-03 11:56:38 发布

原创

最新推荐文章于 2025-09-03 11:56:38 发布 · 256 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

文章展示了一个基于Vue.js编写的custom-dialog组件，该组件支持拖拽功能，并允许用户在弹窗外点击其他元素。组件内部包含了拖动逻辑，以及关闭、取消和确认等操作的事件处理。在父组件中可以通过属性控制弹窗的显示、宽度、高度等，并监听close、cancel和confirm事件。

需求：需要一个可拖拽、可点击弹窗以外元素的弹窗
在这里插入图片描述

custom-dialog组件

<template>
  <div class="custom-dialog" :style="computedStyle">
    <header
      v-if="needDrag"
      class="header"
      @mousedown.stop.prevent="onMouseDown"
    >
      <span v-if="title" class="title">{
   
   {
   
    title }}</span>
      <i
        class="iconfont el-icon-close"
        @mousedown.stop
        @click.stop.prevent="close"
      ></i>
    </header>
    <section class="section hx-scroll">
      <slot></slot>
    </section>
    <footer class="footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </footer>
  </div>
</template>
<script>
export default {
   
   
  name: "custom-dialog.vue",
  props: {
   
   
    needDrag: {
   
   
      type: Boolean,
      default: true,
    }, //是否需要开启拖拽
    width: {
   
   
      type: Number,
      default: 1200,
    },
    height: {
   
   
      type: Number,
      default: 800,
    },
    title: {
   
   
      type: String,
      default: "",
    },
    defPositionStyle: {
   
   
      type: Object,
      default: () => ({
   
   
        left: "50%",
        top: "50%",
        transform: "translate3d(-50%, -50%, 0)",
      }),
    }, //弹窗初始化位置样式，拖拽后，此样式不生效
  },
  data() {
   
   
    return {
   
   
      <