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',
})
评论区