zartui 2.0.8 → 2.0.9

package/lib/index.js

@@ -194,6 +194,10 @@ var _pdfViewer = _interopRequireDefault(require("./pdf-viewer"));
 
 exports.PdfViewer = _pdfViewer.default;
 
+var _pdfViewerV = _interopRequireDefault(require("./pdf-viewer-v2"));
+
+exports.PdfViewerV2 = _pdfViewerV.default;
+
 var _picker = _interopRequireDefault(require("./picker"));
 
 exports.Picker = _picker.default;
@@ -313,11 +317,11 @@ exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 
 exports.Uploader = _uploader.default;
-var version = '2.0.8';
+var version = '2.0.9';
 exports.version = version;
 
 function install(Vue) {
-  var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _pdfViewer.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _timeline.default, _toast.default, _uploader.default];
+  var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _pdfViewer.default, _pdfViewerV.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _timeline.default, _toast.default, _uploader.default];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);

package/lib/index.less

@@ -34,6 +34,7 @@
 @import "./dialog/index.less";
 @import "./calendar/index.less";
 @import "./picker/index.less";
+@import "./pdf-viewer-v2/index.less";
 @import "./pdf-viewer/index.less";
 @import "./action-sheet/index.less";
 @import "./avatar/index.less";

package/lib/pdf-viewer-v2/index.css

@@ -0,0 +1 @@
+.zt-pdf-viewer-v2{width:100%;height:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-pdf-viewer-v2__inner-container{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll}.zt-pdf-viewer-v2::-webkit-scrollbar{width:0;height:0}.zt-pdf-viewer-v2__page-box{width:100%;height:44px;background-color:#fff;text-align:center;font-size:16px;line-height:44px}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__next,.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__pre{cursor:pointer;color:#3a90f6}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__page{margin:0 10px}.zt-pdf-viewer-v2 .zt-loading{position:absolute;top:50%;left:50%;margin-left:-18px;margin-top:-18px}

package/lib/pdf-viewer-v2/index.js

@@ -0,0 +1,345 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+var _toast = _interopRequireDefault(require("../toast"));
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _picker = _interopRequireDefault(require("../picker"));
+
+var _index = require("../utils/index");
+
+var _createNamespace = (0, _utils.createNamespace)('pdf-viewer-v2'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var _ = require('lodash');
+
+var defaultData = function defaultData() {
+  return {
+    pdfDocRef: null,
+    totalPage: 0,
+    currentPage: 1,
+    loading: false,
+    PDFJS: null,
+    pageChangeByButton: false,
+    showPicker: false
+  };
+};
+
+var _default2 = createComponent({
+  props: {
+    /**
+    * pdf地址
+    */
+    pdfUrl: {
+      type: String,
+      default: ""
+    },
+
+    /**
+    * cMap的url地址(用于解决中文乱码或中文显示为空白的问题). 该资源的物理路径在: node_modules/pdfjs-dist/cmaps
+    */
+    cMapUrl: {
+      type: String,
+      default: ""
+    },
+
+    /**
+    * 携带的特定http请求头
+    */
+    httpHeaders: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  data: function data() {
+    return defaultData();
+  },
+  mounted: function mounted() {
+    this.reset();
+    this.renderPdf();
+  },
+  deactivated: function deactivated() {
+    this.pdfDocRef.destroy();
+  },
+  computed: {
+    urlObj: function urlObj() {
+      return {
+        pdfUrl: this.pdfUrl,
+        cMapUrl: this.cMapUrl
+      };
+    }
+  },
+  watch: {
+    urlObj: function urlObj() {
+      this.reset();
+      this.renderPdf();
+    }
+  },
+  methods: {
+    reset: function reset() {
+      (0, _index.resetObject)(this, defaultData());
+    },
+
+    /**
+    * 渲染pdf文件的指定页到画板
+    * @param pdfViewerDom 承载pdf画板的dom容器
+    * @param pdfDoc pdf文件
+    * @param pageNum 需要渲染的页码
+    */
+    renderPdfOnePage: function renderPdfOnePage(pdfViewerDom, pdfDoc, pageNum) {
+      var _this = this;
+
+      // 创建画布
+      var canvas = document.createElement("canvas");
+      canvas.id = "pdfCanvas" + pageNum;
+      pdfViewerDom.appendChild(canvas); // 获取2d上下文
+
+      var context = canvas.getContext("2d");
+      pdfDoc.getPage(pageNum).then(function (page) {
+        // 获取当前pdf页内容, 并设置缩放
+        var viewport = page.getViewport({
+          scale: 1
+        });
+        var width = viewport.width;
+
+        _this.$nextTick(function () {
+          var containerWidth = _this.$refs.pdfContainer.offsetWidth;
+          var ratio = containerWidth / width;
+          viewport = page.getViewport({
+            scale: ratio
+          }); // @ts-ignore
+
+          var realCanvas = context.canvas;
+          realCanvas.width = viewport.width;
+          realCanvas.height = viewport.height; // 将pdf当前页内容画到2d画板中
+          // @ts-ignore
+
+          page.render({
+            canvasContext: context,
+            viewport: viewport
+          });
+        });
+      });
+    },
+
+    /**
+    * 渲染pdf的画布
+    * @param pdfViewerDom 承载pdf画布的dom容器
+    * @param pdfDoc pdf文档
+    */
+    renderPdfCanvas: function renderPdfCanvas(pdfViewerDom, pdfDoc) {
+      var _this2 = this;
+
+      // 清除原来的pdf画布
+      pdfViewerDom.innerHTML = ""; // 获取总页数
+
+      this.totalPage = pdfDoc.numPages;
+      this.loading = false; // 获取显示容器
+
+      for (var i = 1; i <= this.totalPage; i++) {
+        // 循环处理pdf的每页
+        this.renderPdfOnePage(pdfViewerDom, pdfDoc, i);
+      }
+
+      this.$nextTick(function () {
+        _this2.bindScrollEvent();
+      });
+    },
+    bindScrollEvent: function bindScrollEvent() {
+      var _this3 = this;
+
+      var element = document.getElementById("pdfContainer");
+
+      var scrollEvent = _.throttle(function () {
+        if (_this3.pageChangeByButton) {
+          _this3.pageChangeByButton = false;
+          return;
+        }
+
+        if (element.scrollTop === 0) {
+          _this3.currentPage = 1;
+          return;
+        }
+
+        var i = 1,
+            count = _this3.totalPage;
+        var offsetHeight = element.offsetHeight;
+
+        do {
+          var start = _this3.findPos(document.getElementById("pdfCanvas" + i));
+
+          var end = start + document.getElementById("pdfCanvas" + i).offsetHeight;
+
+          if (element.scrollTop + offsetHeight >= start && element.scrollTop + offsetHeight <= end) {
+            _this3.currentPage = i;
+            break;
+          }
+
+          if (i === count && element.scrollTop + offsetHeight > end) {
+            _this3.currentPage = i;
+            break;
+          }
+
+          i++;
+        } while (i < count + 1);
+      }, 500);
+
+      element.addEventListener("scroll", function () {
+        scrollEvent();
+      });
+    },
+    findPos: function findPos(obj) {
+      if (obj) {
+        return obj.offsetTop;
+      } else {
+        return 0;
+      }
+    },
+    renderPdf: function renderPdf() {
+      var _this4 = this;
+
+      if (!this.PDFJS) {
+        this.PDFJS = window['pdfjs-dist/build/pdf'] || window.pdfjsLib;
+
+        if (this.PDFJS && this.PDFJS.GlobalWorkerOptions) {
+          this.PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
+        }
+      }
+
+      this.loading = true;
+      var pdfViewerDom = this.$refs.pdfViewerContainer;
+
+      if (this.pdfUrl) {
+        // 获取pdf文件
+        var pdfLoadingTask = this.PDFJS.getDocument({
+          url: this.pdfUrl,
+          withCredentials: true,
+          // 携带凭证
+          httpHeaders: this.httpHeaders,
+          cMapUrl: this.cMapUrl,
+          cMapPacked: true
+        });
+        pdfLoadingTask.promise.then(function (pdfDoc) {
+          if (pdfDoc && pdfViewerDom) {
+            // 缓存pdf内容
+            _this4.pdfDocRef = pdfDoc;
+
+            _this4.renderPdfCanvas(pdfViewerDom, pdfDoc);
+          }
+        });
+      }
+    },
+    changePage: function changePage(page) {
+      if (page < 1) {
+        (0, _toast.default)("已经是首页");
+        return;
+      }
+
+      if (page > this.totalPage) {
+        (0, _toast.default)("已经是最后一页");
+        return;
+      }
+
+      this.pageChangeByButton = true;
+
+      if (document.getElementById("pdfCanvas" + page)) {
+        document.getElementById("pdfCanvas" + page).scrollIntoView({
+          block: "end",
+          inline: "nearest"
+        });
+      }
+
+      this.currentPage = page;
+    },
+    clickPre: function clickPre() {
+      this.changePage(this.currentPage - 1);
+    },
+    clickNext: function clickNext() {
+      this.changePage(this.currentPage + 1);
+    },
+    showPagePicker: function showPagePicker() {
+      this.showPicker = true;
+    },
+    setPage: function setPage(i) {
+      this.changePage(i);
+      this.showPicker = false;
+    },
+    cancel: function cancel() {
+      this.showPicker = false;
+    },
+    getPageList: function getPageList() {
+      var total = this.totalPage;
+      var arr = [];
+
+      for (var i = 1; i <= total; i++) {
+        arr.push(i);
+      }
+
+      return arr;
+    }
+  },
+  render: function render(h) {
+    return h("div", {
+      "class": bem(),
+      "ref": "pdfContainer"
+    }, [h("div", {
+      "class": bem("inner-container"),
+      "attrs": {
+        "id": "pdfContainer"
+      }
+    }, [h(_loading.default, {
+      "directives": [{
+        name: "show",
+        value: this.loading
+      }],
+      "class": bem('loading-icon')
+    }), h("div", {
+      "directives": [{
+        name: "show",
+        value: !this.loading
+      }],
+      "ref": "pdfViewerContainer",
+      "class": bem("container")
+    })]), this.totalPage ? h("div", {
+      "class": bem("page-box")
+    }, [h("span", {
+      "class": bem("pre"),
+      "on": {
+        "click": this.clickPre
+      }
+    }, ["<"]), h("span", {
+      "class": bem("page"),
+      "on": {
+        "click": this.showPagePicker
+      }
+    }, [this.currentPage, " / ", this.totalPage]), h("span", {
+      "class": bem("next"),
+      "on": {
+        "click": this.clickNext
+      }
+    }, [">"])]) : h(), h(_picker.default, {
+      "attrs": {
+        "show-picker": this.showPicker,
+        "default-index": this.currentPage - 1,
+        "title": "页码",
+        "columns": this.getPageList()
+      },
+      "on": {
+        "cancel": this.cancel,
+        "confirm": this.setPage
+      }
+    })]);
+  }
+});
+
+exports.default = _default2;

package/lib/pdf-viewer-v2/index.less

@@ -0,0 +1,44 @@
+@import '../style/var';
+.zt-pdf-viewer-v2 {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &__inner-container {
+        flex: 1;
+        overflow: scroll;
+    }
+
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    &__page-box {
+        width: 100%;
+        height: 44px;
+        background-color: #fff;
+        text-align: center;
+        font-size: 16px;
+        line-height: 44px;
+
+        .zt-pdf-viewer-v2__pre, .zt-pdf-viewer-v2__next {
+            cursor: pointer;
+            color: #3a90f6;
+        }
+
+        .zt-pdf-viewer-v2__page {
+            margin: 0 10px;
+        }
+    }
+
+    .zt-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -18px;
+        margin-top: -18px;
+    }
+}

package/lib/pdf-viewer-v2/style/index.js

@@ -0,0 +1,10 @@
+require('../../style/base.css');
+require('../../overlay/index.css');
+require('../../info/index.css');
+require('../../icon/index.css');
+require('../../popup/index.css');
+require('../../loading/index.css');
+require('../../toast/index.css');
+require('../../button/index.css');
+require('../../picker/index.css');
+require('../index.css');

package/lib/pdf-viewer-v2/style/less.js

@@ -0,0 +1,10 @@
+require('../../style/base.less');
+require('../../overlay/index.less');
+require('../../info/index.less');
+require('../../icon/index.less');
+require('../../popup/index.less');
+require('../../loading/index.less');
+require('../../toast/index.less');
+require('../../button/index.less');
+require('../../picker/index.less');
+require('../index.less');

package/lib/style/var.less

@@ -408,7 +408,7 @@
 @dialog-button-height: 44px;
 @dialog-round-button-height: 36px;
 @dialog-confirm-button-text-color: @blue;
-@dialog-footer-padding: 0 32px 24px 32px;
+@dialog-footer-padding: 24px 32px;
 
 // Divider
 @divider-margin: @padding-md 0;