Vue【原创】整合el-dialog，可拖动可全屏最大化弹出框

项目中很多时候需要弹出框可以拖动并且可最大化，el-dialog是不满足的，这边采用指令的方式进行拓展。

先来个效果图：

 

首先来个v-darg指令：

import Vue from 'vue'

Vue.directive('alterELDialogMarginTop', {
    inserted(el, binding, vnode) {
        el.firstElementChild.style.marginTop = binding.value + 'px'
    }
})

Vue.directive('alterELDialogMarginLeft', {
    inserted(el, binding, vnode) {
        el.firstElementChild.style.marginLeft = binding.value + 'px'
    }
})

Vue.directive('drag', {
    inserted(el, binding, vnode) {
        let odiv = el.getElementsByTagName('div')[0];
        let headerDiv = odiv.getElementsByTagName('div')[0];
        const deepHeader = headerDiv.querySelector('header');
        const flag = elementContains(headerDiv, deepHeader); //兼容dialog&&drawer
        if(flag) {
            headerDiv = deepHeader;
        }
        headerDiv.onmousedown = e => {
            // document.body.style.userSelect = 'none';
            // document.body.style.webkitUserSelect = 'none';
            // document.body.style.msUserSelect = 'none';
            // document.body.style.mozUserSelect = 'none';
            // let odiv = el.getElementsByTagName('div')[0];
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = e => {
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                odiv.style.marginLeft = left + 'px';
                odiv.style.marginTop = top + 'px';
            };
            document.onmouseup = e => {
                document.onmousemove = null;
                document.onmouseup = null;
                // document.body.style.userSelect = 'auto';
                // document.body.style.webkitUserSelect = 'auto';
                // document.body.style.msUserSelect = 'auto';
                // document.body.style.mozUserSelect = 'auto';
            };
        };
    }
})

const elementContains = (parent, child) => parent !== child && parent.contains(child);

 

再来个v-fullscreen指令：

import Vue from 'vue'

function handleFullScreen(dialog, isFullScreen, marginTop, width) {
    if (!dialog) return false
    if (isFullScreen) {
        dialog.style.marginTop = '0'
        dialog.style.marginLeft = '0'
        dialog.style.position = 'absolute'
        dialog.style.top = '0px'
        dialog.style.bottom = '0px'
        dialog.style.left = '0px'
        dialog.style.width = '100%'
    } else {
        // dialog.style.marginTop = marginTop
        dialog.style.margin = '0 auto'
        dialog.style.width = width
        dialog.style.position = 'relative'
    }
}

Vue.directive('fullScreen', {
    bind(el, binding, vnode) {
        let isFullScreen = false

        const dialog = el.querySelector('.el-dialog')
        const header = el.querySelector('.el-dialog__header')
        if (!header || !dialog || !vnode) return
        header.style.paddingRight = '43px'
        header.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
        const {
            width,
            top
        } = vnode.componentInstance

        const fullScreenBtn = document.createElement('button')
        fullScreenBtn.type = 'button'
        fullScreenBtn.style =
            'padding:0;background: 0 0;border:0;outline:0;cursor:pointer;font-size:17px;top:14px;right:38px;position:absolute;color:white;'

        const fullScreenIcon = document.createElement('i')
        fullScreenIcon.className = 'el-icon el-icon-full-screen'
        fullScreenBtn.append(fullScreenIcon)

        fullScreenBtn.addEventListener('click', () => {
            isFullScreen = !isFullScreen
            handleFullScreen(dialog, isFullScreen, top, width)
            return false
        })

        header.append(fullScreenBtn)

        header.addEventListener('dblclick', () => {
            isFullScreen = !isFullScreen
            handleFullScreen(dialog, isFullScreen, top, width)
            return false
        })
    }
})

 

集成el-dialog，（这个封装里面稍微做了一点对于移动端和pc端的尺寸响应，不需要可以去掉）：

<template>
    <el-dialog
        v-drag
        v-fullScreen
        :title="title"
        :visible="visible"
        :show-close="showClose"
        :close-on-click-modal="closeOnClickModal"
        :append-to-body="true"
        close-on-press-escape
        :modal="modal"
        :width="`${device === mobile ? 100 : width}%`"
        :top="`${device === mobile ? 0 : top}px`"
        v-if="visible"
        @close="closeDialog"
    >
        <div><slot name="title"></slot></div>
        <div><slot></slot></div>
        <div slot="footer"><slot name="footer"></slot></div>
    </el-dialog>
</template>

<script>
// :center="!!+(`${device === mobile ? false : true}`)"

const { body } = document;
const WIDTH = 992; // refer to Bootstrap's responsive design
const DESKTOP = 'desktop';
const MOBILE = 'mobile';

export default {
    name: 'LiloResponsiveDialog',
    props: {
        title: {
            type: String,
            default: ''
        },
        width: {
            type: [Number, String],
            default: 50
        },
        top: {
            type: [Number, String],
            default: 54
        },
        visible: {
            type: Boolean,
            default: false
        },
        showClose: {
            type: Boolean,
            default: true
        },
        closeOnClickModal: {
            type: Boolean,
            default: false
        },
        modal: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            device: DESKTOP,
            mobile: MOBILE
        };
    },
    beforeMount() {
        window.addEventListener('resize', this.$_resizeHandler);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.$_resizeHandler);
    },
    mounted() {
        const isMobile = this.$_isMobile();
        if (isMobile) {
            this.device = 'mobile';
        }
    },
    methods: {
        $_isMobile() {
            const rect = body.getBoundingClientRect();
            return rect.width - 1 < WIDTH;
        },
        $_resizeHandler() {
            if (!document.hidden) {
                const isMobile = this.$_isMobile();
                this.device = isMobile ? MOBILE : DESKTOP;
            }
        },
        closeDialog() {
            this.$emit('update:visible', false);
            this.$emit('close');
        }
    }
};
</script>

<style></style>

 

最后直接调用LiloResponsiveDialog组件即可，而我这里是做成了插件。

import ResponsiveDialog from './src/main';

/* istanbul ignore next */
ResponsiveDialog.install = function(Vue) {
  Vue.component(ResponsiveDialog.name, ResponsiveDialog);
};

export default ResponsiveDialog;