侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

可移动窗口

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 116 阅读 / 2,773 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
//控制条
        '            <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:
    '&lt;el-container v-bind:id=&quot;id&quot; style=&quot;z-index:2002;position: absolute; height: auto; width: auto; border: 1px; top: 20%; left: 35%; border-radius: 2px;background-color: white;&quot;\n' +
    'v-if=&quot;visible&quot;&gt;\n' +
    '    &lt;div style=&quot;height: 30px;width: 100% background-color: gray;&quot;&gt;\n' +
    '       &lt;i class=&quot;el-icon-error&quot; @click.stop=&quot;closeDialog()&quot; style=&quot;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;&quot;&gt;&lt;/i&gt;' +
    '        &lt;div @mousedown=&quot;mousedown&quot;  style=&quot;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; ;&quot;&gt;&lt;/div&gt;' +
    '       &lt;h2 v-html=&quot;title&quot;&gt;&lt;/h2&gt;\n' +
    '    &lt;/div&gt;\n' +
    '    &lt;el-main style=&quot;overflow: hidden;padding:0;&quot;&gt;\n' +
    // '        &lt;div style=&quot;display: inline-block;width: 20px;&quot;&gt;&lt;/div&gt;'+
    '        &lt;slot&gt;这里是内容&lt;/slot&gt;\n' +
    // '        &lt;div style=&quot;display: inline-block;width: 20px;&quot;&gt;&lt;/div&gt;'+
    '    &lt;/el-main&gt;\n' +
    // '    &lt;el-footer&gt;\n' +
    // '    &lt;span class=&quot;dialog-footer&quot;&gt;\n' +
    // '    &lt;el-button @click=&quot;closeDialog&quot;&gt;取 消&lt;/el-button&gt;\n' +
    // '&lt;el-button type=&quot;primary&quot; @click=&quot;closeDialog&quot;&gt;确 定&lt;/el-button&gt;\n' +
    // '&lt;/span&gt;\n' +
    // '&lt;/el-footer&gt;\n' +
    '&lt;/el-container&gt;\n',

})

0

评论区