源码下载
改组件继承el-dialog组件百分之95属性,可直接对<el-dialog>进行替换。在项目中我的命名为:
SkDialog。废话不多说,直接上代码:
vue代码:搞成组件,路径随意,推荐统一放在组件目录下
<!--
@author: kzy;
-->
<template>
<el-dialog ref="skDialog"
custom-class="dialogHeightFull skDialog"
:title="title"
:fullscreen="fullFlag"
:visible.sync="dialogVisible"
:append-to-body="appendToBody"
:lock-scroll="lockScroll"
:modal-append-to-body="modalAppendToBody"
:close-on-click-modal="closeOnClickModal"
:close-on-press-escape="closeOnPressEscape"
:show-close="false"
:before-close="beforeClose"
:center="center"
:destroy-on-close="destroyOnClose"
:width="width"
:top="top"
v-if="dialogVisible"
v-sk-dialog-drag
@closed="closeSkDialog">
<div slot="title" class="skDialog-header">
<div class="skDialog-title"><span>{{title}}</span></div>
<div class="skDialog-icon">
<i :class="fullFlag? 'el-icon-copy-document' : 'el-icon-full-screen' " @click="IsFullscreen"></i>
<i class="el-icon-close" @click="closeSkDialog"></i>
</div>
</div>
<div class="el-dialog__body" v-if="rendered"><slot :style="{height:height}"></slot></div>
<div class="el-dialog__footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
<div class="resize"></div>
</el-dialog>
</template>
<script>
export default {
name: 'SkDialog',
props: {
visible: {
type: Boolean,
default: false
},
titleVisible: {
type: Boolean,
default: true
},
width: {
type: String,
default: '50%'
},
height: {
type: String,
default: '100%'
},
top: {
type: String,
default: '30px'
},
title: {
type: String,
default: ''
},
isfullscreen: {
type: Boolean,
default: false // 默认全屏
},
modal: {
type: Boolean,
default: true
},
modalAppendToBody: {
type: Boolean,
default: true
},
appendToBody: {
type: Boolean,
default: true
},
lockScroll: {
type: Boolean,
default: true
},
closeOnClickModal: {
type: Boolean,
default: false
},
closeOnPressEscape: {
type: Boolean,
default: false
},
showClose: {
type: Boolean,
default: true
},
customClass: {
type: String,
default: ''
},
beforeClose: Function,
center: {
type: Boolean,
default: false
},
destroyOnClose: Boolean
},
data() {
return {
full: false, // 全屏
}
},
computed: {
fullFlag: {
get: function() {
return this.full ?? this.isfullscreen;
},
set: function(n) {
return this.full
}
},
dialogVisible:{ //重新设置一个变量,接收父级传递的参数,引用页面需要使用语法糖,才能使用this.$emit('update:visible', false)对父组件值进行更新
get:function(){
return this.visible
},
set :function(value){
this.$emit('update:visible', false)
}
},
rendered:{ //重新设置一个变量,接收父级传递的参数
get:function(){
return this.visible
},
}
},
mounted() {
},
methods: {
// 全屏 切换
IsFullscreen() {
let dialogDom = document.querySelector(".skDialog");
if (this.isfullscreen == true) {
this.full = this.full === null ? false : !this.full
} else {
this.full = this.full === null ? true : !this.full
dialogDom.style.top =`0px`;
dialogDom.style.left =`auto`;
}
// 传过来的全屏钩子函数
this.$emit('maxFun')
},
// 关闭
closeSkDialog() {
this.full = null
this.$emit('update:visible', false)
// 传过来的关闭钩子函数
this.$emit('closeFun')
}
},
watch:{
},
created() {
this.full = this.isfullscreen
},
}
</script>
<style scoped="scoped">
>>>.el-dialog__header {
background-color: #f2f2f2;
/* height: 48px; */
padding: 10px 20px 10px;
}
.skDialog-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.skDialog .skDialog-icon i {
display: inline-block;
height: 28px;
width: 28px;
line-height: 24px;
text-align: center;
border-radius: 50%;
cursor: pointer;
font-size: 22px;
}
.skDialog .skDialog-icon i:hover {
background-color: #ddd;
}
.skDialog .skDialog-icon i::before {
font-size: 80%;
}
>>>.skDialog.dialogHeightFull.el-dialog {
margin-bottom: 0;
/*overflow-y: hidden;*/
}
.el-dialog__wrapper{
/*overflow: hidden!important;*/
}
.resize{
position: absolute;
right: 0;
bottom: 0;
content: '';
width: 10px;
height: 10px;
cursor: se-resize;
}
</style>
拖动及缩放操作js代码:
/**
@author: kzy;
*/
import Vue from 'vue'
Vue.directive("SkDialogDrag", {
bind(el, binding, vnode, oldVnode) {
const windowW = document.body.clientWidth;
const windowH = document.body.clientHeight
//设置弹框可拉伸最小宽高
let minWidth = 400;
let minHeight = 300;
const dialogHeaderEl = el.querySelector(".el-dialog__header");
//弹窗
const dragDom = el.querySelector(".el-dialog");
//头部加上可拖动cursor
dialogHeaderEl.style.cursor = "move";
// 获取style属性
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
let moveDown = e => {
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL, styT, styMT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes("%")) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
} else {
styL = +sty.left.replace(/\px/g, "");
styT = +sty.top.replace(/\px/g, "");
styMT = +sty.marginTop.replace(/\px/g, "")
}
document.onmousemove = function (e) {
const titleH = dialogHeaderEl.offsetHeight;
// 通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
// 移动边界处理
if (t < 0 && (t + styMT + styT) <= 0 || t < 0 && (styMT + styT) <= 0) {
t = -(styMT + styT);
} else if (t > 0 && t > (document.body.clientHeight - styMT - styT - titleH)) {
t = document.body.clientHeight - styMT - styT - titleH;
}
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
dialogHeaderEl.onmousedown = moveDown;
dragDom.onmousemove = function (e) {
const dialogBODY = el.querySelector(".el-dialog__body");
const resizeDom= el.querySelector(".resize");
const titleH = dialogHeaderEl.offsetHeight;
dragDom.onmousedown = e => {
const clientX = e.clientX;
const clientY = e.clientY;
let elW = dragDom.clientWidth;
let elH = dragDom.clientHeight;
let EloffsetLeft = dragDom.offsetLeft;
let EloffsetTop = dragDom.offsetTop;
let ELscrollTop = el.scrollTop;
let resizeW = resizeDom.clientWidth, resizeH = resizeDom.clientHeight;
//判断点击的位置是不是为头部
if (
clientX > EloffsetLeft &&
clientX < EloffsetLeft + elW &&
clientY > EloffsetTop &&
clientY < EloffsetTop + 100
) {
//如果是头部
e.preventDefault(); // 移动时禁用默认事件
} else {
document.onmousemove = function (e) {
//鼠标拖拽
if (
clientX > EloffsetLeft + elW - resizeW &&
clientX < EloffsetLeft + elW
) {
//往左拖拽
if (clientX > e.clientX) {
if (dragDom.clientWidth < minWidth) {
} else {
dragDom.style.width = elW - (clientX - e.clientX) * 2 + "px";
}
}
//往右拖拽
if (clientX <= e.clientX) {
let targetTW = elW + (e.clientX - clientX) * 2
targetTW > windowW ?
dragDom.style.width = windowW + "px" :
dragDom.style.width = targetTW + "px"
}
}
//底部鼠标拖拽位置
if (
ELscrollTop + clientY > EloffsetTop + elH - resizeH &&
ELscrollTop + clientY < EloffsetTop + elH
) {
//往上拖拽
if (clientY > e.clientY) {
if (dragDom.clientHeight < minHeight) {
} else {
dragDom.style.height = elH - (clientY - e.clientY) * 1 + "px";
dialogBODY.style.height = elH - (clientY - e.clientY) * 1 - titleH + "px";
}
}
//往下拖拽
if (clientY <= e.clientY) {
e.clientY >= windowH ?
dragDom.style.height = windowH - dragDom.offsetTop + "px" :
dragDom.style.height = elH + (e.clientY - clientY) * 1 + "px";
dialogBODY.style.height = elH - (clientY - e.clientY) * 1 - titleH + "px";
}
}
};
//结束
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
};
};
}
});
export default Vue.directive('SkDialogDrag')
将skdialog.js注册为指令:
目录:
import SkDialogDrag from './dialog/skdialog'
const install = function(Vue) {
Vue.directive('SkDialogDrag', SkDialogDrag)
}
指令使用:(v-指令名称(SkDialogDrag))
效果图:
文章来源:https://www.toymoban.com/news/detail-767979.html
注:吃水不忘挖井人,在 原作者wjqocean 的基础之上改进文章来源地址https://www.toymoban.com/news/detail-767979.html
到了这里,关于基于element-ui el-dialog组件封装,可缩放+可移动的弹窗组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!