simple-frame-unit 1.0.2

package/src/components/ed-base-vue/plugin/Message/src/main.vue

@@ -0,0 +1,253 @@
+<template>
+  <transition name="el-message-fade" @after-leave="handleAfterLeave">
+    <div
+        v-show="visible"
+        :class="[
+        'el-message','ed-message',
+
+        center ? 'is-center' : '',
+        showClose ? 'is-closable' : '',
+        customClass
+      ]"
+        :style="positionStyle" role="alert"
+        @mouseenter="clearTimer"
+        @mouseleave="startTimer"
+    >
+      <div :class="['ed-message--content', type && !iconClass ? `el-message--${ type }` : '',]">
+        <i v-if="iconClass" :class="iconClass"></i>
+        <i v-else :class="typeClass"></i>
+        <slot>
+          <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
+          <p v-else class="el-message__content" v-html="message"></p>
+        </slot>
+        <p v-if="showExtData" class="ed-message__extData" @click="handleExtra">
+          <i>详情</i>
+          <i class="el-icon-arrow-right"></i>
+        </p>
+        <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
+      </div>
+
+      <div v-show="showExtData && visibleExtData" :class="[
+          'ed-message--extra',
+          type && !iconClass ? `el-message--${ type }` : '',
+          ]">
+        <div class="el-message__cope" @click="handleCope">{{ copeText }}</div>
+        <div class="el-message__content" v-html="getExtraMsg"></div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+const typeMap = {
+  success: 'success',
+  info: 'info',
+  warning: 'warning',
+  error: 'error'
+};
+
+export default {
+  data() {
+    return {
+      visible: false,
+      visibleExtData: false,
+      showExtData: false,
+      message: '',
+      extraMsg: "",
+      duration: 3000,
+      type: 'info',
+      iconClass: '',
+      customClass: '',
+      onClose: null,
+      showClose: false,
+      closed: false,
+      verticalOffset: 20,
+      timer: null,
+      dangerouslyUseHTMLString: false,
+      center: false,
+      zIndex: 0,
+      copeText: "复制",
+      copeClick: null
+    };
+  },
+
+  computed: {
+    typeClass() {
+      return this.type && !this.iconClass
+          ? `el-message__icon el-icon-${typeMap[this.type]}`
+          : '';
+    },
+    positionStyle() {
+      return {
+        'top': `${this.verticalOffset}px`,
+        'z-index': this.zIndex
+      };
+    },
+    getExtraMsg() {
+      return this.extraMsg.replace(/\r\n/g, '<br/>')
+    }
+  },
+
+  watch: {
+    closed(newVal) {
+      if (newVal) {
+        this.visible = false;
+      }
+    },
+    extraMsg: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.showExtData = true
+        }
+      }
+    }
+  },
+  methods: {
+    handleAfterLeave() {
+      this.$destroy(true);
+      this.$el.parentNode.removeChild(this.$el);
+    },
+
+    close() {
+      this.closed = true;
+      if (typeof this.onClose === 'function') {
+        this.onClose(this);
+      }
+    },
+
+    clearTimer() {
+      clearTimeout(this.timer);
+    },
+
+    startTimer() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.close();
+          }
+        }, this.duration);
+      }
+    },
+    keydown(e) {
+      if (e.keyCode === 27) { // esc关闭消息
+        if (!this.closed) {
+          this.close();
+        }
+      }
+    },
+    handleExtra() {
+      this.visibleExtData = !this.visibleExtData
+    },
+    handleCope() {
+      if (this.copeClick && typeof this.copeClick === 'function') {
+        this.copeClick()
+      } else {
+        this.handleCopyValue(this.extraMsg).then(() => {
+          console.log("已经复制到剪切板")
+        }).catch(() => {
+          console.log('复制失败')
+        })
+      }
+    },
+    /**
+     * 复制到剪切板
+     * @param text
+     * @returns {Promise<never>|Promise<unknown>|Promise<void>}
+     */
+    handleCopyValue(text) {
+      //浏览器禁用了非安全域的 navigator.clipboard 对象
+      //在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
+      if (!navigator.clipboard && window.isSecureContext) {
+        return navigator.clipboard.writeText(text)
+      } else {
+        // 判断是否支持拷贝
+        if (!document.execCommand('copy')) return Promise.reject()
+        // 创建标签，并隐藏
+        const textArea = document.createElement('textarea')
+        textArea.style.position = 'fixed'
+        textArea.style.top = textArea.style.left = '-100vh'
+        textArea.style.opacity = '0'
+        textArea.value = text
+        document.body.appendChild(textArea)
+        // 聚焦、复制
+        textArea.focus()
+        textArea.select()
+        return new Promise((resolve, reject) => {
+          // 不知为何，必须写这个三目，不然copy不上
+          document.execCommand('copy') ? resolve() : reject()
+          textArea.remove()
+        })
+      }
+    }
+  },
+  mounted() {
+    this.startTimer();
+    document.addEventListener('keydown', this.keydown);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keydown);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.ed-message {
+  overflow: initial !important;
+  padding: 0;
+}
+
+.ed-message--content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  padding: 15px 15px 15px 20px;
+
+  .el-message__content {
+    width: 100%;
+  }
+
+  .ed-message__extData {
+    font-size: 12px;
+    color: #409EFF;
+    cursor: pointer;
+    min-width: 50px;
+
+    i {
+      font-style: normal;
+    }
+  }
+
+  .el-message__closeBtn {
+    width: 20px;
+    right: 0;
+  }
+}
+
+
+.ed-message--extra {
+  position: absolute;
+  top: 58px;
+  right: 0;
+  left: 0;
+  padding: 10px;
+  border-radius: 4px;
+
+
+  .el-message__content {
+    line-height: 20px;
+    word-wrap: break-word;
+    max-height: 40vh;
+    overflow-y: auto;
+  }
+
+  .el-message__cope {
+    text-align: right;
+    color: #409EFF;
+    font-size: 12px;
+    margin-bottom: 5px;
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/ed-base-vue/plugin/print/index.js

@@ -0,0 +1,156 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+      styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+    // 包裹要打印的元素
+    let outerHTML = this.wrapperRefDom(this.dom).outerHTML
+    return outerHTML;
+  },
+  // 向父级元素循环，包裹当前需要打印的元素
+  // 防止根级别开头的 css 选择器不生效
+  wrapperRefDom: function (refDom) {
+    let prevDom = null
+    let currDom = refDom
+    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
+    if (!this.isInBody(currDom)) return currDom
+
+    while (currDom) {
+      if (prevDom) {
+        let element = currDom.cloneNode(false)
+        element.appendChild(prevDom)
+        prevDom = element
+      } else {
+        prevDom = currDom.cloneNode(true)
+      }
+
+      currDom = currDom.parentElement
+    }
+
+    return prevDom
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function () {
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
+  isInBody: function (node) {
+    return (node === document.body) ? false : document.body.contains(node);
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+export default Print;