vxe-pc-ui 3.16.0 → 3.16.2

package/lib/image/src/preview.js

@@ -0,0 +1,683 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeImagePreview',
+  props: {
+    value: Number,
+    urlList: Array,
+    urlField: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().imagePreview.urlField;
+      }
+    },
+    maskClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().imagePreview.maskClosable;
+      }
+    },
+    marginSize: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().imagePreview.marginSize;
+      }
+    },
+    showPrintButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().imagePreview.showPrintButton;
+      }
+    },
+    showDownloadButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().imagePreview.showDownloadButton;
+      }
+    },
+    zIndex: Number,
+    toolbarConfig: Object,
+    beforeDownloadMethod: Function,
+    downloadMethod: Function
+  },
+  provide: function provide() {
+    var $xeImagePreview = this;
+    return {
+      $xeImagePreview: $xeImagePreview
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      activeIndex: 0,
+      offsetPct11: false,
+      offsetScale: 0,
+      offsetRotate: 0,
+      offsetLeft: 0,
+      offsetTop: 0
+    };
+    return {
+      xID: xID,
+      reactData: reactData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeUrlProp: function computeUrlProp() {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      return props.urlField || 'url';
+    },
+    computeMarginSize: function computeMarginSize() {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      return _xeUtils.default.toNumber(props.marginSize || 0) || 16;
+    },
+    computeToolbarOpts: function computeToolbarOpts() {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      return Object.assign({}, (0, _ui.getConfig)().imagePreview.toolbarConfig, props.toolbarConfig);
+    },
+    computeRotateText: function computeRotateText() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetRotate = reactData.offsetRotate;
+      if (offsetRotate) {
+        return "".concat(offsetRotate, "\xB0");
+      }
+      return '0°';
+    },
+    computeScaleText: function computeScaleText() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetScale = reactData.offsetScale;
+      if (offsetScale) {
+        return "".concat(_xeUtils.default.ceil((1 + offsetScale) * 100), "%");
+      }
+      return '100%';
+    },
+    computeImgList: function computeImgList() {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      var urlList = props.urlList;
+      var urlProp = $xeImagePreview.computeUrlProp;
+      if (urlList && urlList.length) {
+        return urlList.map(function (item) {
+          if (_xeUtils.default.isString(item)) {
+            return item;
+          }
+          if (item[urlProp]) {
+            return item[urlProp];
+          }
+          return '';
+        });
+      }
+      return [];
+    },
+    computeImgTransform: function computeImgTransform() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetScale = reactData.offsetScale,
+        offsetRotate = reactData.offsetRotate,
+        offsetLeft = reactData.offsetLeft,
+        offsetTop = reactData.offsetTop;
+      var stys = [];
+      var targetScale = 1;
+      if (offsetScale) {
+        targetScale = 1 + offsetScale;
+        stys.push("scale(".concat(targetScale, ")"));
+      }
+      if (offsetRotate) {
+        stys.push("rotate(".concat(offsetRotate, "deg)"));
+      }
+      if (offsetLeft || offsetTop) {
+        // 缩放与位移
+        offsetLeft /= targetScale;
+        offsetTop /= targetScale;
+        var targetOffsetLeft = offsetLeft;
+        var targetOffsetTop = offsetTop;
+        if (offsetRotate) {
+          // 转向与位移
+          switch (offsetRotate % 360) {
+            case 90:
+            case -270:
+              targetOffsetLeft = offsetTop;
+              targetOffsetTop = -offsetLeft;
+              break;
+            case 180:
+            case -180:
+              targetOffsetLeft = -offsetLeft;
+              targetOffsetTop = -offsetTop;
+              break;
+            case 270:
+            case -90:
+              targetOffsetLeft = -offsetTop;
+              targetOffsetTop = offsetLeft;
+              break;
+          }
+        }
+        stys.push("translate(".concat(targetOffsetLeft, "px, ").concat(targetOffsetTop, "px)"));
+      }
+      return stys.length ? stys.join(' ') : '';
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeImagePreview = this;
+      $xeImagePreview.$emit(type, (0, _ui.createEvent)(evnt, {
+        $imagePreview: $xeImagePreview
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeImagePreview = this;
+      var _events = $xeImagePreview._events;
+      $xeImagePreview.$emit('input', value);
+      if (_events && _events.modelValue) {
+        $xeImagePreview.$emit('modelValue', value);
+      } else {
+        $xeImagePreview.$emit('model-value', value);
+      }
+    },
+    handleCloseEvent: function handleCloseEvent(evnt) {
+      var $xeImagePreview = this;
+      $xeImagePreview.dispatchEvent('close', {}, evnt);
+    },
+    resetStyle: function resetStyle() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var elem = $xeImagePreview.$refs.refElem;
+      (0, _dom.removeClass)(elem, 'is--move');
+      Object.assign(reactData, {
+        offsetPct11: false,
+        offsetScale: 0,
+        offsetRotate: 0,
+        offsetLeft: 0,
+        offsetTop: 0
+      });
+    },
+    getOffsetZoomStep: function getOffsetZoomStep() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetScale = reactData.offsetScale;
+      var stepNum = 0.02;
+      if (offsetScale >= -0.6) {
+        stepNum = 0.04;
+        if (offsetScale >= -0.4) {
+          stepNum = 0.07;
+          if (offsetScale >= 0) {
+            stepNum = 0.1;
+            if (offsetScale >= 3) {
+              stepNum = 0.25;
+              if (offsetScale >= 8) {
+                stepNum = 0.4;
+                if (offsetScale >= 16) {
+                  stepNum = 0.6;
+                  if (offsetScale >= 24) {
+                    stepNum = 0.9;
+                    if (offsetScale >= 32) {
+                      stepNum = 1.3;
+                      if (offsetScale >= 39) {
+                        stepNum = 1.9;
+                        if (offsetScale >= 45) {
+                          stepNum = 2.5;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      return stepNum;
+    },
+    handleZoom: function handleZoom(isAdd) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetScale = reactData.offsetScale;
+      var stepNum = $xeImagePreview.getOffsetZoomStep();
+      if (isAdd) {
+        reactData.offsetScale = Number(Math.min(49, offsetScale + stepNum).toFixed(2));
+      } else {
+        reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
+      }
+    },
+    handleChangeEvent: function handleChangeEvent(evnt, isNext) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var activeIndex = reactData.activeIndex || 0;
+      var imgList = $xeImagePreview.computeImgList;
+      if (isNext) {
+        if (activeIndex >= imgList.length - 1) {
+          activeIndex = 0;
+        } else {
+          activeIndex++;
+        }
+      } else {
+        if (activeIndex <= 0) {
+          activeIndex = imgList.length - 1;
+        } else {
+          activeIndex--;
+        }
+      }
+      var imgUrl = imgList[activeIndex || 0];
+      reactData.activeIndex = activeIndex;
+      $xeImagePreview.resetStyle();
+      $xeImagePreview.emitModel(activeIndex);
+      $xeImagePreview.dispatchEvent('change', {
+        url: imgUrl,
+        activeIndex: activeIndex
+      }, evnt);
+    },
+    handleRotateImgEvent: function handleRotateImgEvent(evnt, isRight) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var imgList = $xeImagePreview.computeImgList;
+      var activeIndex = reactData.activeIndex;
+      var imgUrl = imgList[activeIndex || 0];
+      var offsetRotate = reactData.offsetRotate;
+      if (isRight) {
+        offsetRotate += 90;
+      } else {
+        offsetRotate -= 90;
+      }
+      reactData.offsetRotate = offsetRotate;
+      $xeImagePreview.dispatchEvent('rotate', {
+        url: imgUrl,
+        rotateValue: offsetRotate
+      }, evnt);
+    },
+    handlePct11: function handlePct11() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      $xeImagePreview.resetStyle();
+      reactData.offsetPct11 = true;
+    },
+    handlePrintImg: function handlePrintImg() {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var activeIndex = reactData.activeIndex;
+      var imgList = $xeImagePreview.computeImgList;
+      var imgUrl = imgList[activeIndex || 0];
+      if (_ui.VxeUI.print) {
+        _ui.VxeUI.print({
+          align: 'center',
+          pageBreaks: [{
+            bodyHtml: "<img src=\"".concat(imgUrl, "\" style=\"max-width:100%;max-height:100%;\">")
+          }]
+        });
+      }
+    },
+    handleDownloadEvent: function handleDownloadEvent(evnt, imgUrl) {
+      var $xeImagePreview = this;
+      $xeImagePreview.dispatchEvent('download', {
+        url: imgUrl
+      }, evnt);
+    },
+    handleDefaultDownload: function handleDefaultDownload(evnt, imgUrl) {
+      var $xeImagePreview = this;
+      if (_ui.VxeUI.saveFile) {
+        fetch(imgUrl).then(function (res) {
+          return res.blob().then(function (blob) {
+            _ui.VxeUI.saveFile({
+              filename: imgUrl,
+              content: blob
+            });
+            $xeImagePreview.handleDownloadEvent(evnt, imgUrl);
+          });
+        }).catch(function () {
+          if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.message({
+              content: (0, _ui.getI18n)('vxe.error.downErr'),
+              status: 'error'
+            });
+          }
+        });
+      }
+    },
+    handleDownloadImg: function handleDownloadImg(evnt) {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      var reactData = $xeImagePreview.reactData;
+      var activeIndex = reactData.activeIndex;
+      var toolbarOpts = $xeImagePreview.computeToolbarOpts;
+      var btnConf = toolbarOpts.download;
+      var btnOpts = _xeUtils.default.isBoolean(btnConf) ? {} : btnConf ? Object.assign({}, btnConf) : {};
+      var imgList = $xeImagePreview.computeImgList;
+      var imgUrl = imgList[activeIndex || 0];
+      var beforeDownloadFn = props.beforeDownloadMethod || btnOpts.beforeDownloadMethod || (0, _ui.getConfig)().imagePreview.beforeDownloadMethod;
+      var downloadFn = props.downloadMethod || btnOpts.downloadMethod || (0, _ui.getConfig)().imagePreview.downloadMethod;
+      Promise.resolve(beforeDownloadFn ? beforeDownloadFn({
+        $imagePreview: $xeImagePreview,
+        url: imgUrl,
+        index: activeIndex || 0
+      }) : true).then(function (status) {
+        if (status) {
+          if (downloadFn) {
+            Promise.resolve(downloadFn({
+              $imagePreview: $xeImagePreview,
+              url: imgUrl,
+              index: activeIndex || 0
+            })).then(function () {
+              $xeImagePreview.handleDownloadEvent(evnt, imgUrl);
+            }).catch(function (e) {
+              return e;
+            });
+          } else {
+            $xeImagePreview.handleDefaultDownload(evnt, imgUrl);
+          }
+        }
+      });
+    },
+    handleOperationBtn: function handleOperationBtn(evnt, code) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var activeIndex = reactData.activeIndex;
+      var imgList = $xeImagePreview.computeImgList;
+      var imgUrl = imgList[activeIndex || 0];
+      if (imgUrl) {
+        switch (code) {
+          case 'zoomOut':
+            $xeImagePreview.handleZoom(false);
+            break;
+          case 'zoomIn':
+            $xeImagePreview.handleZoom(true);
+            break;
+          case 'pctFull':
+            $xeImagePreview.resetStyle();
+            break;
+          case 'pct11':
+            $xeImagePreview.handlePct11();
+            break;
+          case 'rotateLeft':
+            $xeImagePreview.handleRotateImgEvent(evnt, false);
+            break;
+          case 'rotateRight':
+            $xeImagePreview.handleRotateImgEvent(evnt, true);
+            break;
+          case 'print':
+            $xeImagePreview.handlePrintImg();
+            break;
+          case 'download':
+            $xeImagePreview.handleDownloadImg(evnt);
+            break;
+        }
+      }
+    },
+    wheelEvent: function wheelEvent(evnt) {
+      var $xeImagePreview = this;
+      var delta = evnt.deltaY;
+      if (delta > 0) {
+        evnt.preventDefault();
+        $xeImagePreview.handleZoom(false);
+      } else if (delta < 0) {
+        evnt.preventDefault();
+        $xeImagePreview.handleZoom(true);
+      }
+    },
+    moveEvent: function moveEvent(evnt) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetTop = reactData.offsetTop,
+        offsetLeft = reactData.offsetLeft;
+      var elem = $xeImagePreview.$refs.refElem;
+      evnt.preventDefault();
+      var domMousemove = document.onmousemove;
+      var domMouseup = document.onmouseup;
+      var startX = evnt.pageX;
+      var startY = evnt.pageY;
+      var marginSize = $xeImagePreview.computeMarginSize;
+      document.onmousemove = function (et) {
+        var pageX = et.pageX,
+          pageY = et.pageY;
+        var _getDomNode = (0, _dom.getDomNode)(),
+          visibleHeight = _getDomNode.visibleHeight,
+          visibleWidth = _getDomNode.visibleWidth;
+        et.preventDefault();
+        (0, _dom.addClass)(elem, 'is--move');
+        // 限制边界值
+        if (pageX > marginSize && pageY > marginSize && pageX < visibleWidth - marginSize && pageY < visibleHeight - marginSize) {
+          reactData.offsetLeft = offsetLeft + pageX - startX;
+          reactData.offsetTop = offsetTop + pageY - startY;
+        }
+      };
+      document.onmouseup = function () {
+        document.onmousemove = domMousemove;
+        document.onmouseup = domMouseup;
+        (0, _dom.removeClass)(elem, 'is--move');
+      };
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var isControlKey = (0, _dom.hasControlKey)(evnt);
+      var hasShiftKey = evnt.shiftKey;
+      var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+      var isDownArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+      var isLeftArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+      var isRightArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+      var isR = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.R);
+      var isP = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.P);
+      if (isUpArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetTop -= 1;
+        } else {
+          $xeImagePreview.handleZoom(true);
+        }
+      } else if (isDownArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetTop += 1;
+        } else {
+          $xeImagePreview.handleZoom(false);
+        }
+      } else if (isLeftArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetLeft -= 1;
+        } else {
+          $xeImagePreview.handleChangeEvent(evnt, false);
+        }
+      } else if (isRightArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetLeft += 1;
+        } else {
+          $xeImagePreview.handleChangeEvent(evnt, true);
+        }
+      } else if (isR && isControlKey) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          $xeImagePreview.handleRotateImgEvent(evnt, false);
+        } else {
+          $xeImagePreview.handleRotateImgEvent(evnt, true);
+        }
+      } else if (isP && isControlKey) {
+        evnt.preventDefault();
+        $xeImagePreview.handlePrintImg();
+      }
+    },
+    handleClickMaskEvent: function handleClickMaskEvent(evnt) {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      if (props.maskClosable) {
+        if (evnt.target === evnt.currentTarget) {
+          $xeImagePreview.dispatchEvent('close', {}, evnt);
+        }
+      }
+    },
+    //
+    // Render
+    //
+    renderImgWrapper: function renderImgWrapper(h) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var activeIndex = reactData.activeIndex;
+      var imgList = $xeImagePreview.computeImgList;
+      var imgTransform = $xeImagePreview.computeImgTransform;
+      return h('div', {
+        class: 'vxe-image-preview--img-list',
+        on: {
+          click: $xeImagePreview.handleClickMaskEvent
+        }
+      }, imgList.map(function (url, index) {
+        var isActive = activeIndex === index;
+        return h('img', {
+          class: ['vxe-image-preview--img-item', {
+            'is--active': isActive
+          }],
+          style: isActive ? {
+            transform: imgTransform
+          } : {},
+          attrs: {
+            src: url
+          },
+          on: {
+            mousedown: function mousedown(evnt) {
+              $xeImagePreview.moveEvent(evnt);
+            }
+          }
+        });
+      }));
+    },
+    renderOperationBtn: function renderOperationBtn(h, code, icon) {
+      var $xeImagePreview = this;
+      var toolbarOpts = $xeImagePreview.computeToolbarOpts;
+      var btnConf = toolbarOpts[code];
+      var btnOpts = _xeUtils.default.isBoolean(btnConf) ? {} : btnConf ? Object.assign({}, btnConf) : {};
+      var showBtn = btnConf !== false;
+      return showBtn ? h('div', {
+        class: 'vxe-image-preview--operation-btn',
+        attrs: {
+          title: (0, _ui.getI18n)("vxe.imagePreview.operBtn.".concat(code))
+        },
+        on: {
+          click: function click(evnt) {
+            $xeImagePreview.handleOperationBtn(evnt, code);
+          }
+        }
+      }, [h('i', {
+        class: btnOpts.icon || (0, _ui.getIcon)()[icon]
+      })]) : (0, _ui.renderEmptyElement)($xeImagePreview);
+    },
+    renderBtnWrapper: function renderBtnWrapper(h) {
+      var $xeImagePreview = this;
+      var props = $xeImagePreview;
+      var reactData = $xeImagePreview.reactData;
+      var showPrintButton = props.showPrintButton,
+        showDownloadButton = props.showDownloadButton;
+      var activeIndex = reactData.activeIndex;
+      var imgList = $xeImagePreview.computeImgList;
+      var rotateText = $xeImagePreview.computeRotateText;
+      var scaleText = $xeImagePreview.computeScaleText;
+      var toolbarOpts = $xeImagePreview.computeToolbarOpts;
+      return h('div', {
+        class: 'vxe-image-preview--btn-wrapper'
+      }, [h('div', {
+        class: 'vxe-image-preview--close-wrapper'
+      }, [h('div', {
+        class: 'vxe-image-preview--close-btn',
+        on: {
+          click: $xeImagePreview.handleCloseEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().IMAGE_PREVIEW_CLOSE
+      })]), h('div', {
+        class: 'vxe-image-preview--close-bg'
+      })]), imgList.length > 1 ? h('div', {
+        class: 'vxe-image-preview--previous-btn',
+        on: {
+          click: function click(evnt) {
+            $xeImagePreview.handleChangeEvent(evnt, false);
+          }
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().IMAGE_PREVIEW_PREVIOUS
+      })]) : (0, _ui.renderEmptyElement)($xeImagePreview), imgList.length > 1 ? h('div', {
+        class: 'vxe-image-preview--next-btn',
+        on: {
+          click: function click(evnt) {
+            $xeImagePreview.handleChangeEvent(evnt, true);
+          }
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().IMAGE_PREVIEW_NEXT
+      })]) : (0, _ui.renderEmptyElement)($xeImagePreview), h('div', {
+        class: 'vxe-image-preview--operation-info'
+      }, [h('div', {
+        class: 'vxe-image-preview--operation-deg'
+      }, rotateText), h('div', {
+        class: 'vxe-image-preview--operation-pct'
+      }, scaleText)]), h('div', {
+        class: 'vxe-image-preview--operation-wrapper'
+      }, [h('div', {
+        class: 'vxe-image-preview--operation-active-count'
+      }, [h('span', {
+        class: 'vxe-image-preview--operation-active-current'
+      }, "".concat((activeIndex || 0) + 1)), h('span', {
+        class: 'vxe-image-preview--operation-active-total'
+      }, "/".concat(imgList.length))]), $xeImagePreview.renderOperationBtn(h, 'zoomOut', 'IMAGE_PREVIEW_ZOOM_OUT'), $xeImagePreview.renderOperationBtn(h, 'zoomIn', 'IMAGE_PREVIEW_ZOOM_IN'), $xeImagePreview.renderOperationBtn(h, 'pctFull', 'IMAGE_PREVIEW_PCT_FULL'), $xeImagePreview.renderOperationBtn(h, 'pct11', 'IMAGE_PREVIEW_PCT_1_1'), $xeImagePreview.renderOperationBtn(h, 'rotateLeft', 'IMAGE_PREVIEW_ROTATE_LEFT'), $xeImagePreview.renderOperationBtn(h, 'rotateRight', 'IMAGE_PREVIEW_ROTATE_RIGHT'), showPrintButton || toolbarOpts.print ? $xeImagePreview.renderOperationBtn(h, 'print', 'IMAGE_PREVIEW_PRINT') : (0, _ui.renderEmptyElement)($xeImagePreview), showDownloadButton || toolbarOpts.download ? $xeImagePreview.renderOperationBtn(h, 'download', 'IMAGE_PREVIEW_DOWNLOAD') : (0, _ui.renderEmptyElement)($xeImagePreview)])]);
+    },
+    renderVN: function renderVN(h) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      var offsetPct11 = reactData.offsetPct11;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-image-preview', {
+          'is--pct11': offsetPct11
+        }]
+      }, [$xeImagePreview.renderImgWrapper(h), $xeImagePreview.renderBtnWrapper(h)]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xeImagePreview = this;
+      var reactData = $xeImagePreview.reactData;
+      reactData.activeIndex = val;
+      $xeImagePreview.resetStyle();
+    }
+  },
+  created: function created() {
+    var $xeImagePreview = this;
+    var props = $xeImagePreview;
+    var reactData = $xeImagePreview.reactData;
+    reactData.activeIndex = props.value || 0;
+  },
+  mounted: function mounted() {
+    var $xeImagePreview = this;
+    var elem = $xeImagePreview.$refs.refElem;
+    if (elem) {
+      elem.addEventListener('wheel', $xeImagePreview.wheelEvent, {
+        passive: false
+      });
+    }
+    _ui.globalEvents.on($xeImagePreview, 'keydown', $xeImagePreview.handleGlobalKeydownEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeImagePreview = this;
+    var elem = $xeImagePreview.$refs.refElem;
+    if (elem) {
+      elem.removeEventListener('wheel', $xeImagePreview.wheelEvent);
+      (0, _dom.removeClass)(elem, 'is--move');
+    }
+    _ui.globalEvents.off($xeImagePreview, 'keydown');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */