封装头部可拖拽的弹出框

封装组件：

<template>
    <div class="base-popup" v-if="isVisible" v-draggable :style="styleConfig">
        <div class="popup-header">
            <i></i>
            <span class="popup-title">{{ popupTitle }}</span>
            <span @click="closePopup" class="close-btn"></span>
        </div>
        <div class="popup-content">
            <slot name="popup_body"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        //标题
        popupTitle: "",
        //样式设置
        styleConfig: {
            default: function () {
                return {
                    width: "717px",
                    top: "12vh",
                };
            },
        },
        isVisible: {
            default: false,
        },
        closePopup: {
            type: Function,
        },
    },
    data() {
        return {
            curData: {},
        };
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.base-popup {
    position: absolute;
    z-index: 1;
    left: 30%;
    //文字不可被选中
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .popup-header {
        width: 100%;
        height: 33px;
        display: flex;
        box-sizing: border-box;
        margin-bottom: 3px;
        background: url("../../assets/img/home/popup-header.png") no-repeat
            center/100% 100%;
        cursor: move;
        i {
            display: inline-block;
            width: 32px;
            height: 33px;
            margin-right: 10px;
            background: url("../../assets/img/home/popup-header-icon.png")
                no-repeat center/100%;
            margin-top: 1px;
        }
        .popup-title {
            font-size: 18px;
            line-height: 33px;
            color: #fff;
            font-family: 时尚中黑简体;
        }
        .close-btn {
            position: absolute;
            right: 15px;
            top: 7px;
            cursor: pointer;
            width: 20px;
            height: 20px;
            background: url("../../assets/img/home/popup-close.png") no-repeat
                center/100%;
        }
    }
    .popup-content {
        padding: 12px;
        height: calc(100% - 36px);
        min-height: 300px;
        background-image: linear-gradient(to right, #004554, #001d2d);
        border: 1px solid #176573;
    }
}
</style>

定义v-draggable指令：

import Vue from "vue";

Vue.directive("draggable", {
  inserted: function(el) {
    // el.style.cursor = "move";
    el.onmousedown = function(e) {
      if(e.path[0].className ==='popup-header' || e.path[0].className ==='popup-title'){
        let disx = e.pageX - el.offsetLeft;
        let disy = e.pageY - el.offsetTop;
        document.onmousemove = function(e) {
          let x = e.pageX - disx;
          let y = e.pageY - disy;
          let maxX =
            document.body.clientWidth -
            parseInt(window.getComputedStyle(el).width);
          let maxY =
            document.body.clientHeight -
            parseInt(window.getComputedStyle(el).height);
          if (x < 0) {
            x = 0;
          } else if (maxX > 0 && x > maxX) {
            x = maxX;
          }
  
          if (y < 0) {
            y = 0;
          } else if (maxY > 0 && y > maxY) {
            y = maxY;
          }
          el.style.left = x + "px";
          el.style.top = y + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
        };
      }
    };
  }
});