vue自定义modal弹框

LNNY~

已于 2023-12-01 11:09:10 修改

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-09-29 13:55:27 首次发布

本文链接：https://blog.csdn.net/qq_41742576/article/details/127105510

版权

在vue中自定义modal弹出框组件，通过slot插槽的方式，动态注入中间body和底部内容。

<template>
    <div class="frame" ref="model" :style="{top: `${offset.top}px`, left: `${offset.left}px`}" v-if="showModel">
        <div class="frame-head" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" @mouseleave="mouseleave">
            <div class="title">图片预览</div>
            <div class="close" @click="clickClose">×</div>
        </div>
         <div class="frame-info">
      		<slot name="info"></slot>
    	</div>
    	<div class="frame-btn">
     		<slot name="btn"></slot>
   		</div>
    </div>
</template>

<script>
    export default {
        name: "CustModel",
        data() {
            return {
                moveFlag: false,
                showModel: false,
                image: '',
                offset: {
                    x: 0,
                    y: 0,
                    left: 0,
                    top: 0
                }
            }
        },
        methods: {
            clickClose() {
                this.showModel = false;
                this.offset = {
                    x: 0,
                    y: 0,
                    left: 0,
                    top: 0
                }
            },
            openModel() {
                this.showModel = true;
            },
            mousedown(e) {
                this.moveFlag = true;
                this.offset.x = e.pageX - this.$refs.model.offsetLeft;
                this.offset.y = e.pageY - this.$refs.model.offsetTop;
            },
            mousemove(e) {
                if (this.moveFlag) {
                    this.offset.top = e.pageY - this.offset.y;
                    this.offset.left = e.pageX - this.offset.x;
                }
            },
            mouseleave() {
                this.moveFlag = false;
            },
            mouseup() {
                this.moveFlag = false;
            }
        }
    }
</script>

<style lang="less" scoped>
    .frame {
        position: fixed;
        width: 450px;
        height: auto;
        z-index: 1000;
        background: #ffffff;
        box-shadow: 0 0 4px 1px #a4a4a4;
        overflow: hidden;
        .frame-head {
            width: 100%;
            height: 40px;
            display: flex;
            background: #fff;
            border-bottom: 1px solid #a4a4a4;
            justify-content: space-between;
            padding: 0 10px;
            line-height: 40px;
            .title {
                font-weight: bold;
            }
            div {
                height: 100%;
            }
            .close {
                font-size: 20px;
                font-weight: bold;
                cursor: default;
            }
        }
        .frame-info {
            width: 100%;
            height: auto;
            background: #FFF;
            padding: 5px;
        }
        .frame-btn {
            width: 100%;
            height: auto;
            background: #FFF;
            padding: 5px;
        }
    }
</style>