@ajaxjs/ui 1.1.2 → 1.1.3

package/dist/{components/form → widget}/HtmlEditor/HtmlEditor.vue

@@ -1,70 +1,70 @@
-<template>
-  <div class="aj-form-html-editor">
-    <ul class="toolbar">
-      <li class="dorpdown">
-        <i title="字体" class="text-icon">A</i>
-        <div class="fontfamilyChoser" @click="onFontfamilyChoserClk">
-          <a style="font-family: '宋体'">宋体</a>
-          <a style="font-family: '黑体'">黑体</a>
-          <a style="font-family: '楷体'">楷体</a>
-          <a style="font-family: '隶书'">隶书</a>
-          <a style="font-family: '幼圆'">幼圆</a>
-          <a style="font-family: 'Microsoft YaHei'">Microsoft YaHei</a>
-          <a style="font-family: Arial">Arial</a>
-          <a style="font-family: 'Arial Narrow'">Arial Narrow</a>
-          <a style="font-family: 'Arial Black'">Arial Black</a>
-          <a style="font-family: 'Comic Sans MS'">Comic Sans MS</a>
-          <a style="font-family: Courier">Courier</a>
-          <a style="font-family: System">System</a>
-          <a style="font-family: 'Times New Roman'">Times New Roman</a>
-          <a style="font-family: Verdana">Verdana</a>
-        </div>
-      </li>
-      <li class="dorpdown">
-        <i title="字号" class="text-icon">H</i>
-        <div class="fontsizeChoser" @click="onFontsizeChoserClk">
-          <a style="font-size: xx-small; ">极小</a>
-          <a style="font-size: x-small;  ">特小</a>
-          <a style="font-size: small;    ">小</a>
-          <a style="font-size: medium;   ">中</a>
-          <a style="font-size: large;    ">大</a>
-          <a style="font-size: x-large;  ">特大</a>
-          <a style="font-size: xx-large; line-height: 140%">极大</a>
-        </div>
-      </li>
-      <li @click="onCmdClk"><i title="加粗" class="bold text-icon">B</i></li>
-      <li @click="onCmdClk"><i title="斜体" class="italic text-icon" style="font-style:italic">I</i></li>
-      <li @click="onCmdClk"><i title="下划线" class="underline text-icon" style="text-decoration: underline;">U</i></li>
-      <li @click="onCmdClk"><i title="左对齐"   :class="'justifyleft   '+ (isIonicons ? 'ivu-icon ivu-icon-bingo-menu-fold' : 'fontAwesome fa-align-left')"></i></li>
-      <li @click="onCmdClk"><i title="中间对齐" :class="'justifycenter   '+ (isIonicons ? 'ivu-icon ivu-icon-md-menu' : 'fontAwesome fa-align-center')"></i></li>
-      <li @click="onCmdClk"><i title="右对齐"   :class="'justifyright   '+ (isIonicons ? 'ivu-icon ivu-icon-bingo-menu-unfold' : 'fontAwesome fa-align-right')"></i></li>
-      <li @click="onCmdClk"><i title="数字编号" :class="'insertorderedlist   '+ (isIonicons ? 'ivu-icon ivu-icon-md-list' : 'fontAwesome fa-list-ol')"></i></li>
-      <li @click="onCmdClk"><i title="项目编号" :class="'insertunorderedlist '+ (isIonicons ? 'ivu-icon ivu-icon-ios-list' : 'fontAwesome fa-list-ul')"></i></li>
-      <li @click="onCmdClk"><i title="增加缩进" :class="'outdent '+ (isIonicons ? 'ivu-icon ivu-icon-ios-return-left'  : 'fontAwesome fa-outdent')"></i></li>
-      <li @click="onCmdClk"><i title="减少缩进" :class="'indent  '+ (isIonicons ? 'ivu-icon ivu-icon-ios-return-right' : 'fontAwesome fa-indent')"></i></li>
-      <li class="dorpdown">
-        <i title="字体颜色" :class="isIonicons ? 'ivu-icon ivu-icon-md-brush' : 'fontAwesome fa-paint-brush'"></i>
-        <div class="colorPicker" v-html="createColorPickerHTML()" @click="format('foreColor', $event.target.title)"></div>
-      </li>
-      <li class="dorpdown">
-        <i title="背景颜色" :class="isIonicons ? 'ivu-icon ivu-icon-ios-brush-outline' : 'fontAwesome fa-pencil'"></i>
-        <div class="colorPicker" v-html="createColorPickerHTML()" @click="format('backColor', $event.target.title)"></div>
-      </li>
-      <li @click="createLink"><i title="增加链接" :class="isIonicons ? 'ivu-icon ivu-icon-ios-link'  : 'fontAwesome fa-link'"></i></li>
-      <li @click="insertImage"><i title="增加图片" :class="isIonicons ? 'ivu-icon ivu-icon-md-images' : 'fontAwesome fa-file-image-o'"></i></li>
-      <li @click="saveRemoteImage2Local"><i title="一键存图" :class="isIonicons ? 'ivu-icon ivu-icon-md-photos' : 'fontAwesome fa-hdd-o'"></i></li>
-      <li @click="cleanHTML"><i title="清理 HTML" :class="isIonicons ? 'ivu-icon ivu-icon-md-done-all' : 'fontAwesome fa-eraser'"></i></li>
-      <li @click="isShowCode = !isShowCode"><i title="切换到代码" :class="(isIonicons ? 'ivu-icon ivu-icon-md-code' : 'fontAwesome fa-code')+ ' switchMode'"></i></li>
-    </ul>
-
-    <div class="editorBody">
-      <iframe srcdoc="<html><body></body></html>"></iframe>
-      <textarea></textarea>
-    </div>
-    <!-- <aj-form-popup-upload ref="uploadLayer" :upload-url="uploadImageActionUrl"></aj-form-popup-upload> -->
-  </div>
-</template>
-
-<script lang="ts" src="./HtmlEditor.ts"></script>
-
+<template>
+  <div class="aj-form-html-editor">
+    <ul class="toolbar">
+      <li class="dorpdown">
+        <i title="字体" class="text-icon">A</i>
+        <div class="fontfamilyChoser" @click="onFontfamilyChoserClk">
+          <a style="font-family: '宋体'">宋体</a>
+          <a style="font-family: '黑体'">黑体</a>
+          <a style="font-family: '楷体'">楷体</a>
+          <a style="font-family: '隶书'">隶书</a>
+          <a style="font-family: '幼圆'">幼圆</a>
+          <a style="font-family: 'Microsoft YaHei'">Microsoft YaHei</a>
+          <a style="font-family: Arial">Arial</a>
+          <a style="font-family: 'Arial Narrow'">Arial Narrow</a>
+          <a style="font-family: 'Arial Black'">Arial Black</a>
+          <a style="font-family: 'Comic Sans MS'">Comic Sans MS</a>
+          <a style="font-family: Courier">Courier</a>
+          <a style="font-family: System">System</a>
+          <a style="font-family: 'Times New Roman'">Times New Roman</a>
+          <a style="font-family: Verdana">Verdana</a>
+        </div>
+      </li>
+      <li class="dorpdown">
+        <i title="字号" class="text-icon">H</i>
+        <div class="fontsizeChoser" @click="onFontsizeChoserClk">
+          <a style="font-size: xx-small; ">极小</a>
+          <a style="font-size: x-small;  ">特小</a>
+          <a style="font-size: small;    ">小</a>
+          <a style="font-size: medium;   ">中</a>
+          <a style="font-size: large;    ">大</a>
+          <a style="font-size: x-large;  ">特大</a>
+          <a style="font-size: xx-large; line-height: 140%">极大</a>
+        </div>
+      </li>
+      <li @click="onCmdClk"><i title="加粗" class="bold text-icon">B</i></li>
+      <li @click="onCmdClk"><i title="斜体" class="italic text-icon" style="font-style:italic">I</i></li>
+      <li @click="onCmdClk"><i title="下划线" class="underline text-icon" style="text-decoration: underline;">U</i></li>
+      <li @click="onCmdClk"><i title="左对齐"   :class="'justifyleft   '+ (isIonicons ? 'ivu-icon ivu-icon-bingo-menu-fold' : 'fontAwesome fa-align-left')"></i></li>
+      <li @click="onCmdClk"><i title="中间对齐" :class="'justifycenter   '+ (isIonicons ? 'ivu-icon ivu-icon-md-menu' : 'fontAwesome fa-align-center')"></i></li>
+      <li @click="onCmdClk"><i title="右对齐"   :class="'justifyright   '+ (isIonicons ? 'ivu-icon ivu-icon-bingo-menu-unfold' : 'fontAwesome fa-align-right')"></i></li>
+      <li @click="onCmdClk"><i title="数字编号" :class="'insertorderedlist   '+ (isIonicons ? 'ivu-icon ivu-icon-md-list' : 'fontAwesome fa-list-ol')"></i></li>
+      <li @click="onCmdClk"><i title="项目编号" :class="'insertunorderedlist '+ (isIonicons ? 'ivu-icon ivu-icon-ios-list' : 'fontAwesome fa-list-ul')"></i></li>
+      <li @click="onCmdClk"><i title="增加缩进" :class="'outdent '+ (isIonicons ? 'ivu-icon ivu-icon-ios-return-left'  : 'fontAwesome fa-outdent')"></i></li>
+      <li @click="onCmdClk"><i title="减少缩进" :class="'indent  '+ (isIonicons ? 'ivu-icon ivu-icon-ios-return-right' : 'fontAwesome fa-indent')"></i></li>
+      <li class="dorpdown">
+        <i title="字体颜色" :class="isIonicons ? 'ivu-icon ivu-icon-md-brush' : 'fontAwesome fa-paint-brush'"></i>
+        <div class="colorPicker" v-html="createColorPickerHTML()" @click="format('foreColor', $event.target.title)"></div>
+      </li>
+      <li class="dorpdown">
+        <i title="背景颜色" :class="isIonicons ? 'ivu-icon ivu-icon-ios-brush-outline' : 'fontAwesome fa-pencil'"></i>
+        <div class="colorPicker" v-html="createColorPickerHTML()" @click="format('backColor', $event.target.title)"></div>
+      </li>
+      <li @click="createLink"><i title="增加链接" :class="isIonicons ? 'ivu-icon ivu-icon-ios-link'  : 'fontAwesome fa-link'"></i></li>
+      <li @click="insertImage"><i title="增加图片" :class="isIonicons ? 'ivu-icon ivu-icon-md-images' : 'fontAwesome fa-file-image-o'"></i></li>
+      <li @click="saveRemoteImage2Local"><i title="一键存图" :class="isIonicons ? 'ivu-icon ivu-icon-md-photos' : 'fontAwesome fa-hdd-o'"></i></li>
+      <li @click="cleanHTML"><i title="清理 HTML" :class="isIonicons ? 'ivu-icon ivu-icon-md-done-all' : 'fontAwesome fa-eraser'"></i></li>
+      <li @click="isShowCode = !isShowCode"><i title="切换到代码" :class="(isIonicons ? 'ivu-icon ivu-icon-md-code' : 'fontAwesome fa-code')+ ' switchMode'"></i></li>
+    </ul>
+
+    <div class="editorBody">
+      <iframe srcdoc="<html><body></body></html>"></iframe>
+      <textarea></textarea>
+    </div>
+    <!-- <aj-form-popup-upload ref="uploadLayer" :upload-url="uploadImageActionUrl"></aj-form-popup-upload> -->
+  </div>
+</template>
+
+<script lang="ts" src="./HtmlEditor.ts"></script>
+
 <style lang="less" src="./HtmlEditor.less"></style>

package/dist/{components/form → widget}/HtmlEditor/html-editor-HtmlSanitizer.js

@@ -1,103 +1,103 @@
-// https://github.com/jitbit/HtmlSanitizer/blob/master/HtmlSanitizer.js
-// @ts-ignore
-HtmlSanitizer = new (function foo() {
-    var tagWhitelist_ = {
-        'A': true, 'ABBR': true, 'B': true, 'BLOCKQUOTE': true, 'BODY': true, 'BR': true, 'CENTER': true, 'CODE': true, 'DIV': true, 'EM': true, 'FONT': true,
-        'H1': true, 'H2': true, 'H3': true, 'H4': true, 'H5': true, 'H6': true, 'HR': true, 'I': true, 'IMG': true, 'LABEL': true, 'LI': true, 'OL': true, 'P': true, 'PRE': true,
-        'SMALL': true, 'SOURCE': true, 'SPAN': true, 'STRONG': true, 'TABLE': true, 'TBODY': true, 'TR': true, 'TD': true, 'TH': true, 'THEAD': true, 'UL': true, 'U': true, 'VIDEO': true
-    };
-
-    var contentTagWhiteList_ = { 'FORM': true }; //tags that will be converted to DIVs
-    var attributeWhitelist_ = { 'align': true, 'color': true, 'controls': true, 'height': true, 'href': true, 'src': true, 'style': false, 'target': true, 'title': true, 'type': true, 'width': true };
-    var cssWhitelist_ = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'text-decoration': true, 'font-weight': true };
-    var schemaWhiteList_ = ['http:', 'https:', 'data:', 'm-files:', 'file:', 'ftp:']; //which "protocols" are allowed in "href", "src" etc
-    var uriAttributes_ = { 'href': true, 'action': true };
-    // @ts-ignore
-    this.SanitizeHtml = function (input) {
-        input = input.trim();
-        if (input == "") return ""; //to save performance and not create iframe
-
-        //firefox "bogus node" workaround
-        if (input == "<br>") return "";
-
-        var iframe = document.createElement('iframe');
-        if (iframe['sandbox'] === undefined) {
-            alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
-            return '';
-        }
-
-        iframe['sandbox'] = 'allow-same-origin';
-        iframe.style.display = 'none';
-        document.body.appendChild(iframe); // necessary so the iframe contains a document
-
-        var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
-        if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
-        iframedoc.body.innerHTML = input;
-
-        function makeSanitizedCopy(node) {
-            if (node.nodeType == Node.TEXT_NODE) {
-                var newNode = node.cloneNode(true);
-            } else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[node.tagName] || contentTagWhiteList_[node.tagName])) {
-
-                //remove useless empty spans (lots of those when pasting from MS Outlook)
-                if ((node.tagName == "SPAN" || node.tagName == "B" || node.tagName == "I" || node.tagName == "U")
-                    && node.innerHTML.trim() == "") {
-                    return document.createDocumentFragment();
-                }
-
-                if (contentTagWhiteList_[node.tagName])
-                    newNode = iframedoc.createElement('DIV'); //convert to DIV
-                else
-                    newNode = iframedoc.createElement(node.tagName);
-
-                for (var i = 0; i < node.attributes.length; i++) {
-                    var attr = node.attributes[i];
-                    if (attributeWhitelist_[attr.name]) {
-                        if (attr.name == "style") {
-                            for (s = 0; s < node.style.length; s++) {
-                                var styleName = node.style[s];
-                                if (cssWhitelist_[styleName])
-                                    newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
-                            }
-                        }
-                        else {
-                            if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
-                                if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
-                                    continue;
-                            }
-                            newNode.setAttribute(attr.name, attr.value);
-                        }
-                    }
-                }
-                for (i = 0; i < node.childNodes.length; i++) {
-                    var subCopy = makeSanitizedCopy(node.childNodes[i]);
-                    newNode.appendChild(subCopy, false);
-                }
-            } else {
-                newNode = document.createDocumentFragment();
-            }
-            return newNode;
-        };
-
-        var resultElement = makeSanitizedCopy(iframedoc.body);
-        document.body.removeChild(iframe);
-        return resultElement.innerHTML
-            .replace(/<br[^>]*>(\S)/g, "<br>\n$1")
-            .replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
-    }
-
-    function startsWithAny(str, substrings) {
-        for (var i = 0; i < substrings.length; i++) {
-            if (str.indexOf(substrings[i]) == 0) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    this.AllowedTags = tagWhitelist_;
-    this.AllowedAttributes = attributeWhitelist_;
-    this.AllowedCssStyles = cssWhitelist_;
-    this.AllowedSchemas = schemaWhiteList_;
+// https://github.com/jitbit/HtmlSanitizer/blob/master/HtmlSanitizer.js
+// @ts-ignore
+HtmlSanitizer = new (function foo() {
+    var tagWhitelist_ = {
+        'A': true, 'ABBR': true, 'B': true, 'BLOCKQUOTE': true, 'BODY': true, 'BR': true, 'CENTER': true, 'CODE': true, 'DIV': true, 'EM': true, 'FONT': true,
+        'H1': true, 'H2': true, 'H3': true, 'H4': true, 'H5': true, 'H6': true, 'HR': true, 'I': true, 'IMG': true, 'LABEL': true, 'LI': true, 'OL': true, 'P': true, 'PRE': true,
+        'SMALL': true, 'SOURCE': true, 'SPAN': true, 'STRONG': true, 'TABLE': true, 'TBODY': true, 'TR': true, 'TD': true, 'TH': true, 'THEAD': true, 'UL': true, 'U': true, 'VIDEO': true
+    };
+
+    var contentTagWhiteList_ = { 'FORM': true }; //tags that will be converted to DIVs
+    var attributeWhitelist_ = { 'align': true, 'color': true, 'controls': true, 'height': true, 'href': true, 'src': true, 'style': false, 'target': true, 'title': true, 'type': true, 'width': true };
+    var cssWhitelist_ = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'text-decoration': true, 'font-weight': true };
+    var schemaWhiteList_ = ['http:', 'https:', 'data:', 'm-files:', 'file:', 'ftp:']; //which "protocols" are allowed in "href", "src" etc
+    var uriAttributes_ = { 'href': true, 'action': true };
+    // @ts-ignore
+    this.SanitizeHtml = function (input) {
+        input = input.trim();
+        if (input == "") return ""; //to save performance and not create iframe
+
+        //firefox "bogus node" workaround
+        if (input == "<br>") return "";
+
+        var iframe = document.createElement('iframe');
+        if (iframe['sandbox'] === undefined) {
+            alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
+            return '';
+        }
+
+        iframe['sandbox'] = 'allow-same-origin';
+        iframe.style.display = 'none';
+        document.body.appendChild(iframe); // necessary so the iframe contains a document
+
+        var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
+        if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
+        iframedoc.body.innerHTML = input;
+
+        function makeSanitizedCopy(node) {
+            if (node.nodeType == Node.TEXT_NODE) {
+                var newNode = node.cloneNode(true);
+            } else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[node.tagName] || contentTagWhiteList_[node.tagName])) {
+
+                //remove useless empty spans (lots of those when pasting from MS Outlook)
+                if ((node.tagName == "SPAN" || node.tagName == "B" || node.tagName == "I" || node.tagName == "U")
+                    && node.innerHTML.trim() == "") {
+                    return document.createDocumentFragment();
+                }
+
+                if (contentTagWhiteList_[node.tagName])
+                    newNode = iframedoc.createElement('DIV'); //convert to DIV
+                else
+                    newNode = iframedoc.createElement(node.tagName);
+
+                for (var i = 0; i < node.attributes.length; i++) {
+                    var attr = node.attributes[i];
+                    if (attributeWhitelist_[attr.name]) {
+                        if (attr.name == "style") {
+                            for (s = 0; s < node.style.length; s++) {
+                                var styleName = node.style[s];
+                                if (cssWhitelist_[styleName])
+                                    newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
+                            }
+                        }
+                        else {
+                            if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
+                                if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
+                                    continue;
+                            }
+                            newNode.setAttribute(attr.name, attr.value);
+                        }
+                    }
+                }
+                for (i = 0; i < node.childNodes.length; i++) {
+                    var subCopy = makeSanitizedCopy(node.childNodes[i]);
+                    newNode.appendChild(subCopy, false);
+                }
+            } else {
+                newNode = document.createDocumentFragment();
+            }
+            return newNode;
+        };
+
+        var resultElement = makeSanitizedCopy(iframedoc.body);
+        document.body.removeChild(iframe);
+        return resultElement.innerHTML
+            .replace(/<br[^>]*>(\S)/g, "<br>\n$1")
+            .replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
+    }
+
+    function startsWithAny(str, substrings) {
+        for (var i = 0; i < substrings.length; i++) {
+            if (str.indexOf(substrings[i]) == 0) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    this.AllowedTags = tagWhitelist_;
+    this.AllowedAttributes = attributeWhitelist_;
+    this.AllowedCssStyles = cssWhitelist_;
+    this.AllowedSchemas = schemaWhiteList_;
 });

package/dist/{components/widgets → widget}/ImageEnlarger.vue

@@ -1,99 +1,105 @@
-<template>
-  <a class="aj-img-thumb" :href="imgUrl" v-if="imgUrl" target="_blank">
-    <img :src="imgUrl" @mouseenter="current = imgUrl" @mouseleave="current = null" />
-  </a>
-</template>
-
-<script>
-/**
- * 悬浮显示大图
- */
-export default {
-  props: {
-    imgUrl: { type: String, required: true },// 图片地址
-  },
-
-  data() {
-    return { current: '' }
-  },
-  watch: {
-    current(v) {
-      let el = document.querySelector("body > div.aj-image-large-view");
-
-      if (v) {
-        el.querySelector('img').src = v;
-        setTimeout(() => el.style.display = 'block', 700);
-      } else
-        el.style.display = 'none';
-    }
-  },
-  mounted() {
-    // 初始化
-    if (!document.querySelector("body > div.aj-image-large-view")) {
-      let div = document.createElement("div");
-      div.className = "aj-image-large-view";
-      div.innerHTML = "<img />";
-      document.body.appendChild(div);
-
-      document.addEventListener("mousemove", throttle(e => {
-        if (this.imgUrl) {
-          let w = 0, imgWidth = div.querySelector("img").clientWidth;
-
-          if (imgWidth > e.pageX)
-            w = imgWidth;
-
-          div.style.top = e.pageY + 20 + "px";
-          div.style.left = e.pageX - div.clientWidth + w + "px";
-        }
-      }, 50, 5000), false);
-    }
-  }
-};
-
-/**
- * 函数节流
- *
- * @author https://www.cnblogs.com/moqiutao/p/6875955.html
- * @param fn
- * @param delay
- * @param mustRunDelay
- */
-function throttle(fn, delay, mustRunDelay) {
-  var timer, t_start;
-  return function () {
-    var _this = this;
-    var t_curr = +new Date();
-    window.clearTimeout(timer);
-    if (!t_start) t_start = t_curr;
-    if (t_curr - t_start >= mustRunDelay) {
-      // @ts-ignore
-      fn.apply(this, arguments);
-      t_start = t_curr;
-    } else {
-      var args = arguments;
-      // @ts-ignore
-      timer = window.setTimeout(function () {
-        return fn.apply(_this, args);
-      }, delay);
-    }
-  };
-}
-</script>
-
-<style lang="less">
-.aj-img-thumb img {
-  max-width: 50px;
-  max-height: 60px;
-  vertical-align: middle;
-}
-
-.aj-image-large-view {
-  position: fixed;
-  max-width: 400px;
-  transition: top ease-in 200ms, left ease-in 200ms;
-
-  img {
-    width: 100%;
-  }
-}
+<template>
+  <a class="aj-img-thumb" :href="imgUrl" v-if="imgUrl" target="_blank">
+    <img :src="imgUrl" @mouseenter="current = imgUrl" @mouseleave="current = null" />
+  </a>
+</template>
+
+<script>
+/**
+ * 悬浮显示大图
+ */
+export default {
+  props: {
+    imgUrl: { type: String, required: true },// 图片地址
+  },
+
+  data() {
+    return { current: '' }
+  },
+  watch: {
+    current(v) {
+      let el = document.querySelector("body > div.aj-image-large-view");
+
+      if (v) {
+        el.querySelector('img').src = v;
+        setTimeout(() => el.style.display = 'block', 700);
+      } else
+        el.style.display = 'none';
+    }
+  },
+  mounted() {
+    // 初始化
+    let div = document.querySelector("body > div.aj-image-large-view");
+
+    if (!div) {
+      div = document.createElement("div");
+      div.className = "aj-image-large-view";
+      div.innerHTML = "<img />";
+
+      document.body.appendChild(div);
+    }
+
+    this.$el.addEventListener("mousemove", throttle(e => {
+      if (this.imgUrl) {
+        let w = 0, imgWidth = div.querySelector("img").clientWidth;
+
+        if (imgWidth > e.pageX)
+          w = imgWidth;
+
+        div.style.top = e.pageY + 20 + "px";
+        div.style.left = e.pageX - div.clientWidth + w + "px";
+      }
+    }, 50, 5000), false);
+  }
+};
+
+/**
+ * 函数节流
+ *
+ * @author https://www.cnblogs.com/moqiutao/p/6875955.html
+ * @param fn
+ * @param delay
+ * @param mustRunDelay
+ */
+function throttle(fn, delay, mustRunDelay) {
+  var timer, t_start;
+  return function () {
+    var _this = this;
+    var t_curr = +new Date();
+    window.clearTimeout(timer);
+
+    if (!t_start)
+      t_start = t_curr;
+      
+    if (t_curr - t_start >= mustRunDelay) {
+      // @ts-ignore
+      fn.apply(this, arguments);
+      t_start = t_curr;
+    } else {
+      var args = arguments;
+      // @ts-ignore
+      timer = window.setTimeout(function () {
+        return fn.apply(_this, args);
+      }, delay);
+    }
+  };
+}
+</script>
+
+<style lang="less">
+.aj-img-thumb img {
+  max-width: 50px;
+  max-height: 60px;
+  vertical-align: middle;
+}
+
+.aj-image-large-view {
+  position: fixed;
+  max-width: 400px;
+  transition: top ease-in 200ms, left ease-in 200ms;
+
+  img {
+    width: 100%;
+  }
+}
 </style>