根据需求自己写了一个简单的小弹窗
<template>
<div class="modal-bg" v-if="show1" @click="hideModal" @mousemove="modalMove" @mouseup="cancelMove">
<div class="modal-container" :style="{'background-color':backgroundbox,'color':titleColor}" ref="main" @click.stop>
<!-- @click="stopClose" -->
<div class="modal-header" :style="{'background-color':backgroundTitle}" @mousedown="setStartingPoint">
<div class="headerLeft">
{{ title }}
</div>
<div class="headerRight">
+
</div>
</div>
<div class="modal-main">
<slot></slot>
</div>
<div class="modal-footer" v-if="showFoot">
<button round @click="hideModal">取消</button>
<button type="primary" round @click="submit">确认</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'tanchuang',
props: {
titleColor:{//标题文子的背景颜色
type:String,
default:'#fff'
},
backgroundTitle:{//标题的背景颜色
type:String,
default:'#409EFF'
},
backgroundbox:{//盒子的背景颜色
type:String,
default:'#fff'
},
show: {//是否显示弹窗
type: Boolean,
default: false
},
title: {//标题名称
type: String,
default: ''
},
showFoot:{//是否显示底部按钮
type:Boolean,
default:false
}
},
data() {
return {
x: 0,
y: 0,
node: null,
isCanMove: false,
show1: false
}
},
watch: {
show(newValue, oldValue) {
this.show1 = newValue
},
immediate: true
},
mounted() {
this.node = document.querySelector('.modal-container')
console.log('111', this.node)
},
methods: {
// 实现点击弹窗内容自身阻止冒泡,以防弹窗被关闭
stopClose(e) {
e.stopPropagation();
},
hideModal() {
this.$emit('hideModal')
},
submit() {
this.$emit('submit')
},
setStartingPoint(e) {
this.node = document.querySelector('.modal-container')
// console.log(this.node)
console.log(this.$refs.main.offsetLeft)
this.x = e.clientX - this.node.offsetLeft
this.y = e.clientY - this.node.offsetTop
console.log(this.x, this.y)
this.isCanMove = true
},
modalMove(e) {
if (this.isCanMove) {
this.node.style.left = e.clientX - this.x + 'px'
this.node.style.top = e.clientY - this.y + 'px'
}
},
cancelMove() {
this.isCanMove = false
}
}
}
</script>
<style lang="less" scoped>
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 999;
}
.modal-container {
background: #fff;
border-radius: 10px;
width: 800px;
height: 600px;
overflow: hidden;
overflow:auto;
position: fixed;
padding-top: 56px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-header {
height: 56px;
position: absolute;
width: 100%;
top:0;
left: 0;
background: #409EFF;
box-sizing: border-box;
color: #fff;
display: flex;
padding: 0 15px;
line-height: 56px;
// align-items: center;
// justify-content: center;
justify-content: space-between;
cursor: move;
}
.headerRight{
transform: rotateZ(133deg);
font-size: 28px;
cursor: pointer;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: center;
bottom: 12px;
position: absolute;
right: 20px;
height: 57px;
border-top: 1px solid #ddd;
}
.modal-footer button {
width: 100px;
height: 50px;
margin-left: 10px;
}
.modal-main {
overflow:auto;
padding: 10px;
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>