打开多开器（wpe多开）

蕞近要做一个新项目，使用的是花裤衩大佬的vue-elment-admin框架，但是有需求是要求弹窗可以拖拽，并且要做成非模态形式，打不过产品经理，开始搞！！！

先看看写好的效果图吧，后面再优化：

这是蕞小化效果

弹出效果

话不多说 直接上代码吧，先是封装好的dialog: index.vue

<template> <el-dialog v-el-drag-dialog ref="dragDialog" class="dragDialog" :title="config.title" :fullscreen="isFullScreen" :visible.sync="config.dialogVisible" :append-to-body="true" :close-on-click-modal="false" :show-close="false" :width="config.width" :modal="config.modal" @close="closeDialogDom" :class="isMiniSize? 'isMiniSize': ''" > <div v-show="!isMiniSize" slot="title" class="medium"> <div class="centers"><span>{{config.title}}</span></div> <div class="icons"> <i class="el-icon-minus" style="font-size: 24px" @click="minimize"></i> <i :class="isFullScreen? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline' " style="font-size: 24px" @click="IsFullscreen"></i> <i class="el-icon-close" style="font-size: 24px" @click="closeDialog"></i> </div> </div> <div v-show="isMiniSize" slot="title" class="horn"> <div class="lefts"><span>{{config.title}}</span></div> <div class="centers"><i class="el-icon-circle-plus-outline" style="font-size: 24px" @click="backSize"></i></div> <div class="rights"><i class="el-icon-close" style="font-size: 24px" @click="closeDialog"></i></div> </div> <div v-show="!isMiniSize" class="dialogBody"> <slot></slot> </div> <div v-show="!isMiniSize" v-if="config.isFooter" class="dialogFooter"> <slot name="footer" solt="footer"> <el-button size="small" @click="config.dialogVisible = false">取 消</el-button> <el-button size="small" type="primary" @click="config.dialogVisible = false">确 定</el-button> </slot> </div> </el-dialog></template><script>import elDragDialog from './drag'export default { directives: { elDragDialog }, props: { config: { type: Object, default: => } }, data { return { isFullScreen: false, // 全屏 isMiniSize: false, // 蕞小化 dialogVisible: false, // 隐藏弹窗 } }, watch: { config: { handler { console.log this.initDialog }, immediate: true } }, methods: { // 初始化dialog initDialog { // console.log }, // 蕞小化 minimize { this.isMiniSize = !this.isMiniSize if this.isFullScreen = !this.isFullScreen this.$nextTick => { var miniSizeDom = document.getElementsByClassName miniSizeDom.forEach => { item.style.left = 240 * index + 'px' }) }) }, // 关闭回调 closeDialogDom { this.$nextTick => { // dragDialog var miniSizeDom = document.getElementsByClassName console.log miniSizeDom.forEach => { item.style.left = 240 * index + 'px' }) }) }, // 复原 backSize { this.isMiniSize = !this.isMiniSize if this.isFullScreen = !this.isFullScreen this.$nextTick => { var dragDialogDom = document.getElementsByClassName dragDialogDom.forEach => { item.style.left = 0 + 'px' }) var miniSizeDom = document.getElementsByClassName miniSizeDom.forEach => { item.style.left = 240 * index + 'px' }) }) }, // 关闭弹窗 closeDialog { this.config.dialogVisible = false }, // 打开弹窗 openDialog { this.dialogVisible = true }, // 全屏 IsFullscreen { this.isFullScreen = !this.isFullScreen if this.$emit } }}</script><style lang="scss">// 覆盖层元素增加可穿透点击事件.el-dialog__wrapper{ pointer-events: none !important;}// 弹窗元素不可穿透点击事件.el-dialog{ pointer-events: auto !important;}.el-dialog{ margin-top: 10vh!important;}.no_select{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.isMiniSize{ left: 20px; bottom: 20px; top: auto; right: auto; overflow:hidden; border-radius: 20px; margin: 0px 5px; .el-dialog { margin: 0 !important; width: 240px !important; height: 32px; top: 0 !important; left: 0 !important; } .el-dialog__header{ cursor: auto!important; background: #cccccc; .el-dialog__headerbtn { display: none; } } .dialogFooter{ position: absolute; bottom: 0; background: #cccccc; }}.dragDialog { .is-fullscreen { width: 100% !important; left: 0 !important; top: 0 !important; margin-top: 0 !important; overflow:hidden; position: relative; .el-dialog__header{ cursor: auto!important; } .el-dialog__body{ height: 100%; .dialogBody{ height:100%!important; max-height:none!important; padding-bottom:120px!important; } } .dialogFooter{ position: absolute; bottom: 0; width: 100%; background: #ccc; } } .el-dialog{ .el-dialog__header{ width: 100%; padding: 5px 20px 5px !important; display: flex; background: #ccc; border-bottom: 1px solid #ccc; @extend .no_select; cursor: auto; .medium{ width: 100%; height: 30px; line-height: 30px; display: flex; div{ flex:1; } .centers{ span{ text-align: center; font-size:16px; color:#606266; } } .icons{ display: flex; justify-content: flex-end; i{ color:#5f6368; font-size: 18px!important; display: block; padding:0 7px; } i:hover{ background: #dcdfe6; cursor: pointer; } .el-icon-close:hover{ background: #f00; color:#fff; } } } .horn{ width: 100%; height: 100%; display: flex; justify-content: space-between; div{ i{ color:#5f6368; font-size:20px!important; } } .lefts{ flex:4; margin-top: 3px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; span{ font-size: 16px; color:#606266; } } .centers{ flex:1; } .rights{ flex:1; } i:hover{ cursor: pointer; color:#000; } } .el-dialog__headerbtn { top: 0; font-size: 24px; } } .el-dialog__body{ padding: 1px !important; .dialogBody{ max-height: calc; overflow: auto; padding: 20px 25px 20px; &::-webkit-scrollbar { width: 4px; height: 8px; } &::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } &:hover::-webkit-scrollbar-thumb { background: hsla } &:hover::-webkit-scrollbar-track { background: hsla } } .dialogFooter{ padding: 10px 15px; border-top: 1px solid #ccc; text-align: right; .el-button{ padding:7px 15px; } } } } .dragDialog{ .el-select{ width: 100%; } .el-date-editor{ width: 100%; } }}</style>

drag.js文件

export default { bind { const dialogHeaderEl = el.querySelector const dragDom = el.querySelector dialogHeaderEl.style.cursor = 'move' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle; const sty = dragDom.currentStyle || window.getComputedStyle dialogHeaderEl.onmousedown = => { // 判断当前是否为全屏状态 const path = event.path || ) const isFull = path.find { return false } else { return s.className.indexOf > -1 } }) if { return } const isMinix = path.find { return false } else { return s.className.indexOf > -1 } }) if { return } // 鼠标按下，计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft const disY = e.clientY - dialogHeaderEl.offsetTop // 获取到的值带px 正则匹配替换 let styL, styT // 注意在ie中 弟一次获取到的值为组件自带50% 移动之后赋值为px if ) { styL = +document.body.clientWidth * / 100) styT = +document.body.clientHeight * / 100) } else { styL = +sty.left.replace styT = +sty.top.replace } document.onmousemove = function { // 通过事件委托，计算移动的距离 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 { const dragDom = el.querySelector const offsetLeft = dragDom.offsetLeft const offsetTop = dragDom.offsetTop const left = Number) const top = Number) const windowWidth = window.innerWidth const windowHeight = window.innerHeight - 50 const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth const offsetBottom = offsetTop + dragDom.offsetHeight - windowHeight if { dragDom.style.left = + 'px' } if { dragDom.style.top = + 'px' } if { dragDom.style.left = + 'px' } if { dragDom.style.top = + 'px' } document.onmousemove = null document.onmouseup = null } } }}

下面这个是我们的父组件：drag-dialog.vue

<template> <div class="components-container"> <el-button type="primary" @click="dialogTableVisible = true"> open a Drag Dialog </el-button> <el-button type="primary" @click="openDialog"> 拖拽弹窗1 </el-button> <el-button type="primary" @click="openDialog1"> 拖拽弹窗2 </el-button> <el-button type="primary" @click="openDialog2"> 拖拽弹窗3 </el-button> <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag"> <el-select ref="select" v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-table :data="gridData"> <el-table-column property="date" label="Date" width="150" /> <el-table-column property="name" label="Name" width="200" /> <el-table-column property="address" label="Address" /> </el-table> </el-dialog> <drag-dialog v-if="dialogData.dialogVisible" :config="dialogData">1</drag-dialog> <drag-dialog v-if="dialogData1.dialogVisible" :config="dialogData1">2</drag-dialog> <drag-dialog v-if="dialogData2.dialogVisible" :config="dialogData2">3</drag-dialog> </div></template><script>import elDragDialog from '@/directive/el-drag-dialog' // base on element-uiimport dragDialog from '@/components/DragDialog'export default { name: 'DragDialogDemo', components: { dragDialog }, directives: { elDragDialog }, data { return { dialogData: { width: '50%', dialogVisible: false, title: '拖拽1', modal: false, isFooter: true }, dialogData1: { width: '80%', dialogVisible: false, title: '拖拽2', modal: false, isFooter: true }, dialogData2: { width: '80%', dialogVisible: false, title: '拖拽3', modal: false, isFooter: true }, dialogTableVisible: false, options: [ { value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' } ], value: '', gridData: [{ date: '2016-05-02', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }, { date: '2016-05-04', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }, { date: '2016-05-01', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }, { date: '2016-05-03', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }] } }, methods: { // v-el-drag-dialog onDrag callback function handleDrag { this.$refs.select.blur }, openDialog { this.dialogData.dialogVisible = true }, openDialog1 { this.dialogData1.dialogVisible = true }, openDialog2 { this.dialogData2.dialogVisible = true } }}</script>

话不多说，大佬们，各位兄弟们，有不明白的地方直接留言，看到都会及时回复。

海外精品引流脚本–最强海外引流  

官网：www.facebook18.com

唯一TG：https://t.me/Facebook181818