开发一个简单的 Vue 弹窗组件。Vue实现弹窗

一个弹窗组件通常包含两个部分，分别是遮罩层和内容层。

遮罩层是背景层，一般是半透明或不透明的黑色。

内容层是放我们要展示的内容的容器。

<template>
    <div class="modal-bg" v-show="show">
        <div class="modal-container">
            <div class="modal-header">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <button @click="hideModal">取消</button>
                <button @click="submit">确认</button>
            </div>
        </div>
    </div>
</template>

现在弹窗组件的结构已经搭建出来了。

• 类 modal-bg: 遮罩层
• 类 modal-container: 内容层容器
• 类 modal-header: 内容层头部
• 类 modal-main: 内容层主体部分（用来展示内容）
• 类 modal-footer: 内容层脚部
• 属性 v-show: 控制弹窗的展示与关闭
• 属性 title: 标题
• 方法 hideModal: 点击取消的回调函数
• 方法 submit: 点击确认的回调函数
• 插槽 slot: 用来展示内容

定义完 HTML 结构，还得定义组件的 props 属性，用来接收父组件的传参，以方便在父组件通过属性来控制弹窗。

export default {
    name: 'modal',
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
    },
    methods: {
        hideModal() {
            this.$emit('hideModal')
        },
        submit() {
            this.$emit('submit')
        },
    }
}

从上述代码可知，组件只有两个 prop 属性，分别是 show（控制弹窗展示与关闭）和 title（弹窗标题）。 另外还有两个方法，分别是点击取消和确认的回调函数，它们的作用是触发对应的事件。 到这里，一个简单的弹窗组件已经完成了（样式后面再说）。

如何调用

一个组件写完了，要怎么调用呢？

假设这个组件的文件名为 Modal.vue，我们在父组件里这样调用 （假设父组件和弹窗组件在同一文件夹下）。

<Modal :show="show" :title="title" @hideModal="hideModal" @submit="submit">
    <p>这里放弹窗的内容</p>
</Modal>

import Modal from './Modal.vue'
export default {
    data() {
      return {
        title: '弹窗标题',
        show: true,
      }
    },
    components: {
        Modal
    },
    methods: {
        hideModal() {
            // 取消弹窗回调
            this.show = false
        },
        submit() {
            // 确认弹窗回调
            this.show = false
        }
    }
}

把子组件要求的两个属性和两个方法都写上，一个简单的弹窗组件就这样完成了。

改进

样式

现在市面上的 UI 库特别多，所以一些通用的组件样式不建议自己写，直接用现成的就好。在这个组件上，我们可以使用 element-ui，改造后变成这样。

<template>
    <div class="modal-bg" v-show="show">
        <div class="modal-container">
            <div class="modal-header">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div>
        </div>
    </div>
</template>

嗯… 看起来只有两个按钮变化了，不过没关系，后面的内容部分肯定还有用得上的时候。

功能

看起来这个简单的弹窗组件真的是非常简单，我们可以在此基础上适当的增加一些功能，例如：拖拽。

一个弹窗组件的拖拽一般通过三个事件来控制，分别是 mousedown、mousemove、mouseup。

• mousedown 用来获取鼠标点击时弹窗的坐标
• mousemove 用来计算鼠标移动时弹窗的坐标
• mouseup 取消弹窗的移动

先来看代码。

<template>
    <div class="modal-bg" v-show="show" @mousemove="modalMove" @mouseup="cancelMove">
        <div class="modal-container" :class="position">
            <div class="modal-header" @mousedown="setStartingPoint">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div>
        </div>
    </div>
</template>

在弹窗上增加了三个事件 mousedown、mousemove、mouseup，用来控制弹窗移动（点击弹窗头部进行拖拽）。

data() {
        return {
            x: 0, // 弹窗 X 坐标
            y: 0, // 弹窗 Y 坐标
            node: null, // 弹窗元素
            isCanMove: false // 是否能拖动弹窗
        }
    },
    mounted() {
        // 将弹窗元素赋值给 node
        this.node = document.querySelector('.modal-container')
    },
    setStartingPoint(e) {
        this.x = e.clientX - this.node.offsetLeft
        this.y = e.clientY - this.node.offsetTop
        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
    }

通过这些新增的代码，这个弹窗就具有了拖拽的功能。

最后附上这个弹窗组件的完整代码

<template>
    <div class="modal-bg" v-show="show" @mousemove="modalMove" @mouseup="cancelMove">
        <div class="modal-container">
            <div class="modal-header" @mousedown="setStartingPoint">
                {{ title }}
            </div>
            <div class="modal-main">
                <slot></slot>
            </div>
            <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'modal',
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            x: 0,
            y: 0,
            node: null,
            isCanMove: false
        }
    },
    mounted() {
        this.node = document.querySelector('.modal-container')
    },
    methods: {
        hideModal() {
            this.$emit('hideModal')
        },
        submit() {
            this.$emit('submit')
        },
        setStartingPoint(e) {
            this.x = e.clientX - this.node.offsetLeft
            this.y = e.clientY - this.node.offsetTop
            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 scoped>
.modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10;
}
.modal-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.modal-header {
    height: 56px;
    background: #409EFF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 57px;
    border-top: 1px solid #ddd;
}
.modal-footer button {
    width: 100px;
}
.modal-main {
    padding: 15px 40px;
}
</style>

原文：https://blog.csdn.net/weixin_42176612/article/details/112264679

如果弹窗打开关闭需要有一点淡入谈出的动画

可以在外面包括一层transition组件

<template>
    <transition name="fade">
        <div class="modal-bg" v-show="show" @mousedown="setStartingPoint" @mousemove="modalMove" @mouseup="cancelMove">
            <div class="modal-container">
                <!-- <div class="modal-header" @mousedown="setStartingPoint">
                {{ title }}
            </div> -->
                <div class="header_wrap">
                    2022级计算机1班
                    <img :src="require('@/assets/img/close.png')" @click="$emit('closemodal')"
                        style="height: 13px;width: 13px;cursor: pointer;position:absolute;right: 13px;top:13px" alt="">
                </div>
                <div class="modal-main">
                    <slot></slot>
                </div>
                <!-- <div class="modal-footer">
                <el-button round @click="hideModal">取消</el-button>
                <el-button type="primary" round @click="submit">确认</el-button>
            </div> -->
            </div>
        </div>
    </transition>
</template>

然后在写一点样式即可

// 写一点淡入谈出的动画试试
.fade-leave,   // 离开前,进入后透明度是1
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 1s; //过度时间
}
.fade-leave-to,
.fade-enter {
  opacity: 0;
}

在有滚动条的情况下垂直居中

参考：https://blog.csdn.net/rinima6114/article/details/17596019

当然如果是在大屏那种按比例自适的，其实偏移值按照比例写死就行了，不用动态计算，按比例自适其实就是动态计算了，所以偏移量就设置固定的值就行了，那个比例会自动计算在不同分辨率下的扩大缩小比例。