161 lines
4.0 KiB
Vue
161 lines
4.0 KiB
Vue
<template>
|
||
<section class="ai-dialog__wrapper">
|
||
<el-dialog custom-class="ai-dialog" v-on="$listeners" v-bind="$attrs" :visible.sync="dialog">
|
||
<div class="ai-dialog__header fill" slot="title" v-text="title"/>
|
||
<div class="ai-dialog__content">
|
||
<div class="ai-dialog__content--wrapper pad-r8">
|
||
<slot/>
|
||
</div>
|
||
</div>
|
||
<template v-if="customFooter" slot="footer">
|
||
<slot name="footer"/>
|
||
</template>
|
||
<div v-else class="dialog-footer" slot="footer">
|
||
<el-button @click="onCancel">取消</el-button>
|
||
<el-button @click="onConfirm" type="primary">确认</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'AiDialog',
|
||
model: {
|
||
prop: "visible",
|
||
event: "input"
|
||
},
|
||
props: {
|
||
visible: Boolean,
|
||
title: {type: String, default: ''},
|
||
customFooter: Boolean,
|
||
isDrag: {type: Boolean, default: true}
|
||
},
|
||
data() {
|
||
return {
|
||
dialog: false,
|
||
}
|
||
},
|
||
watch: {
|
||
dialog(v) {
|
||
this.visible != v && this.$emit("input", v)
|
||
},
|
||
visible(v) {
|
||
this.dialog = v
|
||
}
|
||
},
|
||
methods: {
|
||
onCancel() {
|
||
this.dialog = false
|
||
this.$emit('cancel')
|
||
},
|
||
onConfirm() {
|
||
this.$emit('confirm')
|
||
},
|
||
initDraggable() {
|
||
const dialogHeaderEl = this.$el.querySelector('.el-dialog__header')
|
||
const dragDom = this.$el.querySelector('.el-dialog')
|
||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
|
||
|
||
dialogHeaderEl.onmousedown = e => {
|
||
console.log(e)
|
||
// 鼠标按下，获得鼠标在盒子内的坐标（鼠标在页面的坐标 减去 对话框的坐标），计算当前元素距离可视区的距离
|
||
const disX = e.clientX - dialogHeaderEl.offsetLeft
|
||
const disY = e.clientY - dialogHeaderEl.offsetTop
|
||
// 获取到的值带px 正则匹配替换
|
||
let styL, styT
|
||
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||
if (sty.left.includes('%')) {
|
||
styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
|
||
styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
|
||
} else {
|
||
styL = +sty.left.replace(/px/g, '')
|
||
styT = +sty.top.replace(/px/g, '')
|
||
}
|
||
document.onmousemove = function (e) {
|
||
// 鼠标移动，用鼠标在页面的坐标 减去 鼠标在盒子里的坐标，获得模态框的left和top值
|
||
// 通过事件委托，计算移动的距离
|
||
const l = e.clientX - disX
|
||
const t = e.clientY - disY
|
||
// 移动当前元素
|
||
dragDom.style.left = `${l + styL}px`
|
||
dragDom.style.top = `${t + styT}px`
|
||
}
|
||
document.onmouseup = function () {
|
||
// 鼠标弹起，移除鼠标移动事件
|
||
document.onmousemove = null
|
||
document.onmouseup = null
|
||
}
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.isDrag && this.initDraggable()
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.ai-dialog {
|
||
margin: unset !important;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.el-dialog__body {
|
||
padding: 20px 40px 20px;
|
||
}
|
||
|
||
.ai-dialog__content {
|
||
overflow-y: auto;
|
||
padding-bottom: 4px;
|
||
max-height: 500px;
|
||
|
||
.ai-dialog__content--wrapper {
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.ai-dialog__header {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
padding: 0 16px;
|
||
cursor: move;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
padding: 16px 20px;
|
||
box-sizing: border-box;
|
||
background: #F3F6F9;
|
||
text-align: center;
|
||
|
||
& + .el-button {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.el-button {
|
||
width: 92px !important;
|
||
}
|
||
}
|
||
|
||
.el-dialog__header {
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
top: unset;
|
||
right: unset;
|
||
margin: 0 16px;
|
||
}
|
||
}
|
||
</style>
|