cy-element-ui 1.1.6 → 1.1.7

package/packages/tabDialog/src/main.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="cy-tab-dialog">
+    <div
+      v-show="visible && modal"
+      contenteditable="false"
+      class="cy-tab-dialog-modal"
+      :style="{ zIndex: modelZIndex, height: modelHeight ? modelHeight : '100%' }"
+      @click="closeOnClickModal && handleClose"
+    ></div>
+
+    <el-dialog
+      :visible="visible"
+      :title="title"
+      :width="width"
+      :fullscreen="fullscreen"
+      :modal="false"
+      :modal-append-to-body="false"
+      :append-to-body="false"
+      :lock-scroll="true"
+      :custom-class="customClass"
+      :close-on-click-modal="appendToTagsView ? false : closeOnClickModal"
+      :close-on-press-escape="appendToTagsView ? false : closeOnPressEscape"
+      :show-close="showClose"
+      :center="center"
+      :destroy-on-close="destroyOnClose"
+      contenteditable="false"
+      v-dialog-drag="isDrag"
+      v-dialog-drag-width="isDrag"
+      v-dialog-drag-height="isDrag"
+      :before-close="beforeClose"
+      @open="handleOpen"
+      @opened="handleOpened"
+      @close="handleClose"
+      @closed="handleClosed"
+    >
+      <template v-if="$slots.title" slot="title">
+        <slot name="title"></slot>
+      </template>
+
+      <slot></slot>
+
+      <template v-if="$slots.footer" slot="footer">
+        <slot name="footer"></slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ElDialog from '../../dialog';
+import Vue from 'vue';
+
+export default {
+  name: 'CyTabDialog',
+  components: {
+    ElDialog
+  },
+  props: {
+    // 是否显示 Dialog，支持 .sync 修饰符
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // Dialog 的标题，也可通过具名 slot
+    title: {
+      type: String,
+      default: ''
+    },
+    // Dialog 的宽度
+    width: {
+      type: String,
+      default: '50%'
+    },
+    // 是否为全屏 Dialog
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    // Dialog CSS 中的 margin-top 值
+    top: {
+      type: String,
+      default: '6vh'
+    },
+    // 是否需要遮罩层
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    // 是否在 Dialog 出现时将 body或上层 滚动锁定
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    // Dialog 的自定义类名
+    customClass: {
+      type: String,
+      default: ''
+    },
+    // 是否可以通过点击 modal 关闭 Dialog
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    // 是否可以通过按下 ESC 关闭 Dialog
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示关闭按钮
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    // 是否对头部和底部采用居中布局
+    center: {
+      type: Boolean,
+      default: false
+    },
+    // 关闭时销毁 Dialog 中的元素
+    destroyOnClose: {
+      type: Boolean,
+      default: false
+    },
+    // 是否放到tagsView中，即当前app-views下面，此属性true时，appendToBody无效
+    appendToTagsView: {
+      type: Boolean,
+      default: false
+    },
+    // 对话框是否可拖拽
+    isDrag: {
+      type: Boolean,
+      default: true
+    },
+    // 关闭前的回调，会暂停 Dialog 的关闭
+    beforeClose: {
+      type: Function
+    }
+  },
+  data() {
+    return {
+      // 判断dialog是否已经放到对应的div下
+      rendered: false,
+      modelZIndex: 1000,
+      modelHeight: 0,
+      // 当前app-views的dom元素
+      parentDom: null,
+      // 当前el-dialog的dom元素
+      elDialogDom: null
+    };
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.$emit('open');
+          Vue.nextTick(() => {
+            const dom = this.$el;
+            // 首次打开
+            if (!this.rendered) {
+              this.rendered = true;
+              if (this.appendToTagsView) {
+                // 将当前dialog挪到当前app-views里面 app-container
+                this.parentDom = dom.closest('.app-container');
+                if (!this.parentDom) this.parentDom = document.body;
+                this.parentDom.append(dom);
+              } else if (this.appendToBody) {
+                // 将当前dialog挪到当前body里面
+                this.parentDom = document.body;
+                this.parentDom.append(dom);
+              }
+              // 添加键盘监听事件
+              if (this.closeOnPressEscape) {
+                document.addEventListener('keydown', this.escKeyDown);
+              }
+            }
+
+            setTimeout(() => {
+              if (this.parentDom) this.modelHeight = this.parentDom.scrollHeight + 'px';
+              // 当前VDialog不在body中时
+              if (!this.parentDom || this.parentDom.tagName.toUpperCase() !== 'BODY') {
+                // 获取el-dialog的宽度，如果大于app-views的宽度，则el-dialog不居中显示
+                let elDialogWidth = dom.getElementsByClassName('el-dialog')[0].clientWidth;
+                if (!this.parentDom || elDialogWidth < this.parentDom.clientWidth) {
+                  dom.getElementsByClassName('el-dialog')[0].style.left = '50%';
+                  dom.getElementsByClassName('el-dialog')[0].style.transform = 'translateX(-50%)';
+                } else {
+                  dom.getElementsByClassName('el-dialog')[0].style.left = '0';
+                }
+              }
+              dom.getElementsByClassName('el-dialog')[0].style.marginTop = this.top;
+            }, 50);
+
+            // 获取el-dialog的z-index，赋值给model，用于处理model的层级问题
+            this.elDialogDom = dom.children[1];
+            setTimeout(() => {
+              this.modelZIndex = this.elDialogDom.style.zIndex;
+            }, 50);
+          });
+        } else {
+          // immediate=true时，首次打开不需要触发close事件
+          if (this.rendered) this.$emit('close');
+        }
+      }
+    }
+  },
+  methods: {
+    handleOpen() {
+      this.$emit('open');
+    },
+
+    handleOpened() {
+      this.$emit('opened');
+    },
+
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.$emit('close');
+    },
+
+    handleClosed() {
+      this.$emit('closed');
+    },
+
+    /**
+     * 监听esc键
+     */
+    escKeyDown(event) {
+      if (event.keyCode === 27) {
+        // 获取body下的直接子节点中的已打开的vDialog
+        let bodyVDialogDomArr = [];
+        let bodyChildrenArr = document.body.childNodes;
+        for (let i = 0; i < bodyChildrenArr.length; i++) {
+          let item = bodyChildrenArr[i];
+          if (item.tagName && item.tagName.toUpperCase() === 'DIV' && item.className && item.className.split(' ').includes('cy-tab-dialog-opened')) {
+            bodyVDialogDomArr.push(item);
+          }
+        }
+        // 判断body中是否有已打开的vDialog，如果有，优先关闭body下的vDialog
+        if (bodyVDialogDomArr.length > 0) {
+          // 获取当前cy-tab-dialog在当前body中的下标
+          let curDomIndex = [].indexOf.call(bodyVDialogDomArr, this.$el);
+          if (curDomIndex === bodyVDialogDomArr.length - 1) {
+            this.handleClose();
+          }
+        } else if (document.getElementById('tags-view-container') && this.parentDom.parentElement.getAttribute('include_name')) {
+          // 获取当前app-views对应的include_name值
+          let includeName = this.parentDom.parentElement.getAttribute('include_name');
+          // 根据includeName获取tagsView中的tag标签页
+          let tagDom = document.getElementById('tags-view-container').querySelectorAll(`[include_name=${ includeName }]`);
+          if (tagDom && tagDom[0]) {
+            // 判断此标签页是否为选中状态，只有选中状态中的vDialog才可以进行关闭
+            if (tagDom[0].className.split(' ').includes('active')) {
+              let vDialogList = this.parentDom.getElementsByClassName('cy-tab-dialog-opened');
+              // 获取当前cy-tab-dialog在当前app-views中的下标
+              let curDomIndex = [].indexOf.call(vDialogList, this.$el);
+              if (curDomIndex === vDialogList.length - 1) {
+                this.handleClose();
+              }
+            }
+          }
+        } else {
+          this.handleClose();
+        }
+      }
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.escKeyDown);
+  }
+};
+</script>

package/packages/theme-chalk/src/index.scss

@@ -86,3 +86,4 @@
 @import "./descriptions-item.scss";
 @import "./result.scss";
 @import "./treeSelect.scss";
+@import "./tabDialog.scss";

package/packages/theme-chalk/src/tabDialog.scss

@@ -0,0 +1,43 @@
+@import "./base.scss";
+
+.cy-tab-dialog {
+  line-height: 0;
+}
+
+.cy-tab-dialog-modal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.5;
+  background: #000000;
+}
+
+.cy-tab-dialog .el-dialog__wrapper {
+  position: absolute !important;
+  line-height: 18px;
+
+  .el-dialog {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .4);
+    display: flex;
+    flex-direction: column;
+
+    .el-dialog__header {
+      flex-shrink: 0;
+    }
+
+    .el-dialog__body {
+      height: 100%;
+    }
+  }
+}
+
+.cy-tab-dialog.cy-tab-dialog-fullscreen .el-dialog__wrapper {
+  position: fixed !important;
+
+  .el-dialog {
+    left: 0 !important;
+    top: 0;
+  }
+}

package/src/index.js

@@ -89,7 +89,8 @@ import Empty from '../packages/empty/index.js';
 import Descriptions from '../packages/descriptions/index.js';
 import DescriptionsItem from '../packages/descriptions-item/index.js';
 import Result from '../packages/result/index.js';
-import TreeSelect from '../packages/treeSelect/index.js';
+import TreeSelect from '../packages/treeSelect/index.js';
+import TabDialog from '../packages/tabDialog/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -178,7 +179,8 @@ const components = [
   Descriptions,
   DescriptionsItem,
   Result,
-  TreeSelect,
+  TreeSelect,
+  TabDialog,
   CollapseTransition
 ];
 
@@ -214,7 +216,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '1.1.4',
+  version: '1.1.7',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -308,5 +310,6 @@ export default {
   Descriptions,
   DescriptionsItem,
   Result,
-  TreeSelect
+  TreeSelect,
+  TabDialog
 };