element-ui 中Dialog自定义封装弹窗拖拽+水平方向伸缩

本文介绍了如何使用Element-UI在Dialog组件中实现自定义的拖拽功能和水平方向的伸缩。通过在utils工具包中定义initDialogHeight方法,然后创建全局自定义指令Vue.directive,最后在el-dialog元素上应用v-drag指令来展示效果。
摘要由CSDN通过智能技术生成

             三步就可以实现~~~好了上代码

1.在工具包utils中定义 initDialogHeight 方法

/**
 * @方法名称: initDialogHeight
 * @功能描述: 判断当电脑的缩放大小不一致时弹框的高度
 */
export function initDialogHeight() {
    let h = initLayoutInfo().height;
    let devicePixelRatio = window.devicePixelRatio; 
    let jResolutionHeight = window.screen.height;
    if (devicePixelRatio == 1) {
        if (jResolutionHeight == 600) {
            //当电脑屏幕分辨率的高度为600,缩放比例为100%时
            h = h - 120;
        } else if (jResolutionHeight == 768) {
            //当电脑屏幕分辨率的高度为768,缩放比例为100%时
            h = h - 140;
        } else if (jResolutionHeight == 720) {
            //当电脑屏幕分辨率的高度为720,缩放比例为100%时
            h = h - 140;
        } else if (jResolutionHeight == 800) {
            //当电脑屏幕分辨率的高度为800,缩放比例为100%时
            h = h - 170;
        } else if (jResolutionHeight == 864) {
            //当电脑屏幕分辨率的高度为864,缩放比例为100%时
            h = h - 160;
        } else if (jResolutionHeight == 960) {
            //当电脑屏幕分辨率的高度为960,缩放比例为100%时
            h = h - 170;
        } else if (jResolutionHeight == 900) {
            //当电脑屏幕分辨率的高度为900,缩放比例为100%时
            h = h - 195;
        } else if (jResolutionHeight == 1024) {
            //当电脑屏幕分辨率的高度为1024,缩放比例为100%时
            h = h - 180;
        } else if (jResolutionHeight == 1050) {
            //当电脑屏幕分辨率的高度为1050,缩放比例为100%时
            h = h - 190;
        } else if (jResolutionHeight == 1080) {
            //当电脑屏幕分辨率的高度为1080,缩放比例为100%时
            h = h - 200;
        } else {
            h = h - 200;
        }

    } else if (devicePixelRatio == 1.25) {
        if (jResolutionHeight == 615) {
            //当电脑屏幕分辨率的高度为768,缩放比例为125%时   615为可视高度
            h = h - 120;
        } else if (jResolutionHeight == 640) {
            //当电脑屏幕分辨率的高度为800,缩放比例为125%时   640为可视高度
            h = h - 130;
        } else if (jResolutionHeight == 692) {
            //当电脑屏幕分辨率的高度为864,缩放比例为125%时   692为可视高度
            h = h
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值