封装element Dialog实现全屏、最小、双击回复原状和拖拽功能

一、效果图

正常

2020-04-29_160148.png

全屏

2020-04-29_162312.png

最小

2020-04-29_162427.png

1.1 下载阿里图标

下载阿里图标https://www.iconfont.cn/,然后解压，在src/assets下建一个iconfont文件夹，将解压的文件复制到iconfont下

1.2 配置访问阿里图标

1)在vue.config.js中配置解析规则

    config.module
      .rule('iconfont')
      .test(/\.(png|jpg|gif)$/)
      .include.add(resolve('src/assets/iconfont'))
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
      })
      .end()

2)在main.js中配置css

import '@/assets/iconfont/iconfont.css' // permission control

1.3 iconfont使用

 <i class="iconfont icon-close" style="font-size: 24px"></i>

1.4 封装Dialog为ZDialog

<template>
  <div class="app-container">
    <el-dialog
      v-dialogDrag
      :ref="zDialogRef"
      class="ZDialog"
      :title="title"
      :fullscreen="isfullscreen"
      :visible.sync="visible"
      :append-to-body="true"
      :show-close="false"
      :show="show"
      :width="width"
      :close-on-click-modal="true"
      @close="handleClose"
      :class="isminimize ? 'isminimize' : ''"
    >
      <div
        v-show="!isminimize"
        slot="title"
        class="medium"
        @dblclick="resetFull"
      >
        <div class="lefts">
          <span>{{ title }}</span>
        </div>
        <div class="icons">
          <i
            title="缩小"
            class="iconfont icon-minus"
            style="font-size: 24px"
            @click="minimize"
          ></i>
          <i
            title="放大"
            :class="
              isfullscreen
                ? 'iconfont icon-full-screen-exit'
                : 'iconfont icon-full-screen'
            "
            style="font-size: 24px"
            @click="IsFullscreen"
          ></i>
          <i
            title="关闭"
            class="iconfont icon-close"
            style="font-size: 24px"
            @click="closeDialog"
          ></i>
        </div>
      </div>
      <div v-show="isminimize" slot="title" class="horn" @dblclick="resetFull">
        <div class="lefts">
          <span>{{ title }}</span>
        </div>
        <div class="icons">
          <i
           title="放大"
            class="iconfont icon-full-screen"
            style="font-size: 24px"
            @click="minimize"
          ></i>
        </div>
        <i
        title="关闭"
          class="iconfont icon-close"
          style="font-size: 24px"
          @click="closeDialog"
        ></i>
      </div>
      <div v-show="!isminimize" class="dialogBody">
        <slot name="body" solt="body">
         </slot>
      </div>
      <div v-show="!isminimize" class="dialogFooter" v-if="isFooter">
        <slot name="footer" solt="footer">
         </slot>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isfullscreen: false, // 全屏
      isminimize: false, // 最小化
      visible: this.show // 隐藏弹窗
    }
  },
  props:{
    show: { type: Boolean, default: false },
    title:{type:String,default:''},
    zDialogRef:{type:String,default:'zDialog'},
    isFooter:{ type: Boolean, default: false }
  },
  methods: {
    // 最小化
    minimize() {
      console.log("minimize");
      this.isminimize = !this.isminimize;
      if (this.isfullscreen) this.isfullscreen = !this.isfullscreen;
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('update:show', false)
       this.$emit('update:closeOnClickModal', false)
    },
    // 全屏
    IsFullscreen() {
      this.isfullscreen = !this.isfullscreen;
      if (this.isfullscreen) this.$emit("isfullscreen");
    },
    resetFull() {
      if (this.isfullscreen === true && this.isminimize === false) {
        this.minimize();
      }
      if (this.isfullscreen === false && this.isminimize === false) {
        this.IsFullscreen();
      }
      if (this.isfullscreen === false && this.isminimize === true) {
        this.minimize();
      }
    },
    handleClose(){
      this.$emit('update:show',false)
    }
  },
   watch: {
    visible(val) {
      if (val) {
        const el = this.$refs[this.zDialogRef].$el.querySelector(".el-dialog");
        el.style.left = 0;
        el.style.top = 0;
      }
    },
   show: {
      immediate: true,
      handler(show) {
        this.visible = this.show
      }
    }
  },
  directives: {
    dialogDrag: {
      bind(el, binding, vnode, oldVnode) {
        const dialogHeaderEl = el.querySelector(".el-dialog__header");
        const dragDom = el.querySelector(".el-dialog");
        dialogHeaderEl.style.cursor = "move";
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty =
          dragDom.currentStyle || window.getComputedStyle(dragDom, null);
        // const fixedX =
        // const fixedY =
        dialogHeaderEl.onmousedown = e => {
          // 判断当前是否为全屏状态
          const path =
            event.path || (event.composedPath && event.composedPath());
          const isFull = path.find(s => {
            if (s.className === undefined) {
              return false;
            } else {
              return s.className.indexOf("is-fullscreen") > -1;
            }
          });
          if (isFull !== undefined) {
            return;
          }
          const isMinix = path.find(s => {
            if (s.className === undefined) {
              return false;
            } else {
              return s.className.indexOf("isminimize") > -1;
            }
          });
          if (isMinix !== undefined) {
            return;
          }
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;

          // 获取到的值带px 正则匹配替换
          let styL, styT;

          // 注意在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", "");
            styT = +sty.top.replace("px", "");
          }

          document.onmousemove = function(e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            const t = e.clientY - disY;
            // 移动当前元素
            dragDom.style.left = `${l + styL}px`;
            dragDom.style.top = `${t + styT}px`;
            // const dom = e.path.find(s => s.querySelector('.el-dialog')).children[0]
            //
            // if (dom.offsetTop < 0) {
            //   dragDom.style.top = `0px`
            // }
            // if (dom.offsetLeft < 0) {
            //   dragDom.style.left = `0px`
            // }

            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          };

          document.onmouseup = function(e) {
            const dragDom = el.querySelector(".el-dialog");
            const offsetLeft = dragDom.offsetLeft;
            const offsetTop = dragDom.offsetTop;
            const left = Number(dragDom.style.left.replace("px", ""));
            const top = Number(dragDom.style.top.replace("px", ""));
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight - 50;
            const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth;
            const offsetBottom =
              offsetTop + dragDom.offsetHeight - windowHeight;
            if (offsetLeft < 0) {
              dragDom.style.left = left - offsetLeft + "px";
            }
            if (offsetTop < 0) {
              dragDom.style.top = top - offsetTop + "px";
            }
            if (offsetRight > 0) {
              dragDom.style.left = left - offsetRight + "px";
            }
            if (offsetBottom > 0) {
              dragDom.style.top = top - offsetBottom + "px";
            }
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
 
};
</script>
<style lang="scss">
.el-dialog {
  margin-top: 10vh !important;
}
.no_select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}
.isminimize {
  left: 20px;
  bottom: 20px;
  top: auto;
  right: auto;
  overflow: hidden;

  .el-dialog {
    margin: 0 !important;
    width: 240px !important;
    height: 43px;
    top: 0 !important;
    left: 0 !important;
  }
  .el-dialog__header {
    cursor: auto !important;

    .el-dialog__headerbtn {
      display: none;
    }
  }
  .dialogFooter {
    position: absolute;
    bottom: 0;
  }
}
.ZDialog {
  .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%;
      padding: 0px !important;
      .dialogBody {
        height: 100% !important;
        max-height: none !important;
        padding-bottom: 120px !important;
      }
    }
    .dialogFooter {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #fff;
    }
  }
  .el-dialog {
    .el-dialog__header {
      width: 100%;
      padding: 10px 10px 10px !important;
      display: flex;
      border-bottom: 1px solid #ccc;
      @extend .no_select;
      cursor: auto;
      .medium {
        width: 100%;
        height: 100%;
        display: flex;
        div {
          flex: 1;
        }
        .lefts {
          margin-top: 3px;
          span {
            text-align: left;
            font-size: 16px;
            color: #606266;
          }
        }
        .icons {
          display: flex;
          justify-content: flex-end;
          i {
            color: #5f6368;
            font-size: 18px !important;
            display: block;
            padding: 3px;
          }
          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;
          }
        }
        .icons {
          display: flex;
          justify-content: flex-end;
          i {
            color: #5f6368;
            font-size: 18px !important;
            display: block;
            padding: 3px;
          }
          i:hover {
            background: #dcdfe6;
            cursor: pointer;
          }
          .el-icon-close:hover {
            background: #f00;
            color: #fff;
          }
        }
        // .centers {
        //   flex: 1;
        // }
        // .rights {
        //   flex: 1;
        // }
        i:hover {
          cursor: pointer;
          color: #000;
        }
      }
      .el-dialog__headerbtn {
        top: 0;
        font-size: 24px;
      }
    }
    .el-dialog__body {
      padding: 0px !important;
      .dialogBody {
        max-height: calc(80vh - 50px);
        // box-shadow: inset 0px -2px 10px 1px #b0b3b2;
        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(0, 0%, 53%, 0.4);
        }
        &:hover::-webkit-scrollbar-track {
          background: hsla(0, 0%, 53%, 0.1);
        }
      }
      .dialogFooter {
        padding: 5px 15px;
        border-top: 1px solid #ccc;
        text-align: right;
        .el-button {
          padding: 7px 15px;
        }
      }
    }
  }
  .ZDialog {
    // display: flex;
    // justify-content: center;
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
  }
}
</style>

1.5 组件调用

传入的参数title,show,zDialogRef,isFooter(默认可省略，省略则不显示footer)

<z-dialog
    :title="title"
    :show.sync="dialogVisible"
    :zDialogRef="z-dialog1"
    :isFooter="false"
  >
       <div slot="body">
        对话框body
       </div>
       <div slot="footer">
        对话框footer
       </div>
  </z-dialog>     

import ZDialog from '@/components/ZDialog'
export default {        
  components: {
      ZDialog
  },
  data() {
     return {
       title:'提示',
       dialogVisible: false,
     }
  }
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343