可移动窗口

//控制条
        '            <el-window :id="\'ptz\'+this.videoId"  :visible.sync=ptz.show>' +
        '                    <video-controls :device-code="deviceCode" />   '+
        '            </el-window>' +

Vue.component('el-window', {
    props: {
        title: String,
        id: [String, Number],
        visible: Boolean,
    },
    data() {
        return {
            // title: '标题',
            selectElement: ''
        }
    },
    methods: {
        closeDialog(e) {
            this.$emit("update:visible", false)
        },
        mousedown(event) {
            this.selectElement = document.getElementById(this.id)
            var div1 = this.selectElement
            this.selectElement.style.cursor = 'move'
            this.isDowm = true
            var distanceX = event.clientX - this.selectElement.offsetLeft
            var distanceY = event.clientY - this.selectElement.offsetTop
            console.log(distanceX)
            console.log(distanceY)
            document.onmousemove = function (ev) {
                var oevent = ev || event
                div1.style.left = oevent.clientX - distanceX + 'px'
                div1.style.top = oevent.clientY - distanceY + 'px'
            }
            document.onmouseup = function () {
                document.onmousemove = null
                document.onmouseup = null
                div1.style.cursor = 'default'
            }
        }
    },
    mounted:function(){
      this.visible=false;
    },
template:
    '<el-container v-bind:id="id" style="z-index:2002;position: absolute; height: auto; width: auto; border: 1px; top: 20%; left: 35%; border-radius: 2px;background-color: white;"\n' +
    'v-if="visible">\n' +
    '    <div style="height: 30px;width: 100% background-color: gray;">\n' +
    '       <i class="el-icon-error" @click.stop="closeDialog()" style="height: 23px; width: 22px; position: absolute; right: 8px; top:-12px; font-size: 23px; line-height: 23px; text-align: center; background-color: grey; border-radius: 22px;"></i>' +
    '        <div @mousedown="mousedown"  style="background-color: rgba(255, 255, 255, 0.18);height: 27px; width: 81px; position: absolute; left: 0px; top: -27px; font-size: 23px; line-height: 23px; text-align: center; ;"></div>' +
    '       <h2 v-html="title"></h2>\n' +
    '    </div>\n' +
    '    <el-main style="overflow: hidden;padding:0;">\n' +
    // '        <div style="display: inline-block;width: 20px;"></div>'+
    '        <slot>这里是内容</slot>\n' +
    // '        <div style="display: inline-block;width: 20px;"></div>'+
    '    </el-main>\n' +
    // '    <el-footer>\n' +
    // '    <span class="dialog-footer">\n' +
    // '    <el-button @click="closeDialog">取 消</el-button>\n' +
    // '<el-button type="primary" @click="closeDialog">确 定</el-button>\n' +
    // '</span>\n' +
    // '</el-footer>\n' +
    '</el-container>\n',

})