vue+elementUI 封装可拖拽可全屏的弹窗组件

1.新建dragWindow.vue,将以下代码复制到该vue文件中;

<template>
    <div v-if="visible" :id="id" class="drag_box" :class="isFull?'full':''" v-drag :style="{'width':width,'height':height}">
        <!-- 标题 -->
        <div class="my_drag_title">
            <div class="drag_title">{{title}}</div>
            <div class="my_drag_title_btn">
                <i @click="fullscreen" :class="isFull?'i-icon-exit-full-screen':'i-icon-full-screen'" :title="isFull?'缩小':'全屏'"></i>
                <i @click="close" class="i-icon-close" title="关闭"></i>
            </div>
        </div>
        <!-- 内容 -->
        <div class="my_drag_content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "drag",
    data() {
        return {
            isFull:false,//是否全屏
            visible_:false,
            id:'drag_box'+new Date().getTime()
        };
    },
    props:{
        title: {
            type: String,
            default: ''
        },
        visible:{
            type: Boolean,
            required: true
        },
        width:{
            type: String,
            default: '200px'
        },
        height:{
            type: String,
            default: '50vh'
        }
    },
    mounted(){
        //初始化数据
        this.initPage();
    },
    methods:{
        initPage(){
            var _this=this;
            //按键esc处理
            window.addEventListener("fullscreenchange", function (e) {
                _this.isFull=!_this.isFull;
            })
        },
        /**
         * 关闭窗口
         */
        close: function () {
          this.$emit("close")
          if(this.isFull){
              this.fullscreen();
          }

        },
        /**
         * 全屏
         */
        fullscreen: function () {

          let element = document.documentElement;
          if (this.isFull) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {    // 否则，进入全屏
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
          }
        //   this.isFull=!this.isFull;
        },
    },
    //注册局部组件指令

  directives: {
    drag: {
      inserted: function (el, binding, vnode) {
        vnode = vnode.elm
        el.onmousedown = ((event) => {
          if (event.target.className !== "my_drag_title") {
            return
          }
          // (clientX, clientY)点击位置距离当前可视区域的坐标(x，y)
          // offsetLeft, offsetTop 距离上层或父级的左边距和上边距

          // 获取鼠标在弹窗中的位置
          let mouseX = event.clientX - vnode.offsetLeft
          let mouseY = event.clientY - vnode.offsetTop

          // 绑定移动和停止函数
          document.onmousemove = ((event) => {
            let left, top

            // 获取新的鼠标位置(event.clientX, event.clientY)
            // 弹窗应该在的位置(left, top)
            left = event.clientX - mouseX
            top = event.clientY - mouseY
            // 赋值移动
            vnode.style.left = left + 'px'
            vnode.style.top = top + 'px'
            vnode.style.zIndex =vnode.style.zIndex
          })
          document.onmouseup = (() => {
            document.onmousemove = document.onmouseup = null
          })
        })
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.drag_box {
    border: 1px solid #afafaf;
    background-color: white;
    position: fixed;
    z-index: 1000;
    box-shadow: 5px 10px 10px #e8e8e8;
    min-height: 500px;
    &.full{
        width: 100% !important;
        height: 100% !important;
        left: 0px !important;
        top: 0px !important;
    }
}
.my_drag_title{
    background: #e8e8e8;
    padding: 10px;
    cursor: move;
    display: flex;
    display: flex;
    justify-content: space-between;
    .drag_title{

    }
    .my_drag_title_btn{
        cursor: pointer;
        i{
            font-size: 22px;
            &:hover{
                cursor: pointer;
                color: #409eff;
            }
        }
    }
}
.my_drag_content{
  overflow: auto;
  height: calc(100% - 44px);
  position: relative;
}
</style>

2.新建一个test.vue 文件，将以下代码拷入文件中；

 注意：el-button 为elementUI中封装的按钮组件，如果项目中没有引入浏览器的控制台会报错；

<template>
    <div class="test">
        <el-button @click="showW">显示</el-button>
        <drag-window title='标题' :visible="visible" width="600px" height="300px">
            <div>内容</div>
        </drag-window>
    </div>
</template>
<script>
    import dragWindow from './dragWindow'
    export default {
        name: 'test',
        components: {
            dragWindow
        },
        props:[],
        data () {
            return {
                visible:false,
            }
        },
        watch: {},
        mounted () {
        },
        created () {
        },
        methods: {
            showW(){
                this.visible=true;
            }
        }

    }
</script>    

效果预览：