zartui 0.1.35 → 0.1.39

package/es/action-sheet/index.css

@@ -1 +1 @@
-.zt-action-sheet{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;max-height:80%;overflow:hidden;color:rgba(0,0,0,.6)}.zt-action-sheet__content{-webkit-box-flex:1;-webkit-flex:1 auto;flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-action-sheet__cancel,.zt-action-sheet__item{display:block;width:100%;padding:10px 16px;font-size:16px;line-height:24px;background-color:#fff;border:none;cursor:pointer}.zt-action-sheet__cancel:active,.zt-action-sheet__item:active{background-color:rgba(0,0,0,.04)}.zt-action-sheet__item{position:relative;color:#000}.zt-action-sheet__item:not(:last-child).zt-action-sheet__item::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-action-sheet__item--disabled,.zt-action-sheet__item--loading{color:rgba(0,0,0,.2)}.zt-action-sheet__item--disabled:active,.zt-action-sheet__item--loading:active{background-color:#fff}.zt-action-sheet__item--disabled{cursor:not-allowed}.zt-action-sheet__item--loading{cursor:default}.zt-action-sheet__cancel{-webkit-flex-shrink:0;flex-shrink:0;box-sizing:border-box;color:#000}.zt-action-sheet__subname{margin-top:8px;color:#969799;font-size:12px;line-height:18px}.zt-action-sheet__gap{display:block;height:12px;background-color:#f5f5fa}.zt-action-sheet__header{-webkit-flex-shrink:0;flex-shrink:0;font-size:14px;line-height:44px;text-align:center;position:relative;color:rgba(0,0,0,.4)}.zt-action-sheet__header::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-action-sheet__description{position:relative;-webkit-flex-shrink:0;flex-shrink:0;padding:20px 16px;color:#969799;font-size:14px;line-height:20px;text-align:center}.zt-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-action-sheet__loading-icon .zt-loading__spinner{width:22px;height:22px}.zt-action-sheet__close{position:absolute;top:0;right:0;padding:0 16px;color:#c8c9cc;font-size:22px;line-height:inherit}.zt-action-sheet__close:active{color:#969799}
+.zt-action-sheet{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;max-height:80%;overflow:hidden;color:rgba(0,0,0,.6)}.zt-action-sheet__content{-webkit-box-flex:1;-webkit-flex:1 auto;flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-action-sheet__cancel,.zt-action-sheet__item{display:block;width:100%;padding:10px 16px;font-size:16px;line-height:24px;background-color:#fff;border:none;cursor:pointer}.zt-action-sheet__cancel:active,.zt-action-sheet__item:active{background-color:rgba(0,0,0,.04)}.zt-action-sheet__item{position:relative;color:#000}.zt-action-sheet__item:not(:last-child).zt-action-sheet__item::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-action-sheet__item--disabled,.zt-action-sheet__item--loading{color:rgba(0,0,0,.2)}.zt-action-sheet__item--disabled:active,.zt-action-sheet__item--loading:active{background-color:#fff}.zt-action-sheet__item--disabled{cursor:not-allowed}.zt-action-sheet__item--loading{cursor:default}.zt-action-sheet__item--has-subname{padding-top:9px;padding-bottom:9px}.zt-action-sheet__cancel{-webkit-flex-shrink:0;flex-shrink:0;box-sizing:border-box;color:#000}.zt-action-sheet__subname{margin-top:2px;color:#969799;font-size:12px;line-height:16px}.zt-action-sheet__gap{display:block;height:12px;background-color:#f5f5fa}.zt-action-sheet__header{-webkit-flex-shrink:0;flex-shrink:0;font-size:14px;line-height:44px;text-align:center;position:relative;color:rgba(0,0,0,.4)}.zt-action-sheet__header::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-action-sheet__header--align-start{text-align:start}.zt-action-sheet__description{position:relative;-webkit-flex-shrink:0;flex-shrink:0;padding:20px 16px;color:#969799;font-size:14px;line-height:20px;text-align:center}.zt-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-action-sheet__loading-icon .zt-loading__spinner{width:20px;height:20px}.zt-action-sheet__close{position:absolute;top:0;right:0;padding:0 16px;color:rgba(0,0,0,.4);font-size:20px;line-height:inherit}.zt-action-sheet__close:active{color:#969799}

package/es/action-sheet/index.js

@@ -26,6 +26,20 @@ function ActionSheet(h, props, slots, ctx) {
   }
 
   function Header() {
+    if (slots.title) {
+      return h("div", {
+        "class": bem('header', 'align-start')
+      }, [slots.title(), closeable && h(Icon, {
+        "attrs": {
+          "name": props.closeIcon
+        },
+        "class": bem('close'),
+        "on": {
+          "click": onCancel
+        }
+      })]);
+    }
+
     if (title) {
       return h("div", {
         "class": bem('header')
@@ -80,13 +94,15 @@ function ActionSheet(h, props, slots, ctx) {
       }, [item.subname])];
     }
 
+    var hasSubName = !loading && item.subname;
     return h("button", {
       "attrs": {
         "type": "button"
       },
       "class": [bem('item', {
         disabled: disabled,
-        loading: loading
+        loading: loading,
+        'has-subname': hasSubName
       }), item.className],
       "style": {
         color: item.color
@@ -113,16 +129,6 @@ function ActionSheet(h, props, slots, ctx) {
     }
   }
 
-  function Description() {
-    var description = (slots.description == null ? void 0 : slots.description()) || props.description;
-
-    if (description) {
-      return h("div", {
-        "class": bem('description')
-      }, [description]);
-    }
-  }
-
   return h(Popup, _mergeJSXProps([{
     "class": bem(),
     "attrs": {
@@ -138,7 +144,7 @@ function ActionSheet(h, props, slots, ctx) {
       "closeOnClickOverlay": props.closeOnClickOverlay,
       "safeAreaInsetBottom": props.safeAreaInsetBottom
     }
-  }, inherit(ctx, true)]), [Header(), Description(), h("div", {
+  }, inherit(ctx, true)]), [Header(), h("div", {
     "class": bem('content')
   }, [props.actions && props.actions.map(Option), slots.default == null ? void 0 : slots.default()]), CancelText()]);
 }
@@ -148,7 +154,6 @@ ActionSheet.props = _extends({}, popupMixinProps, {
   actions: Array,
   duration: [Number, String],
   cancelText: String,
-  description: String,
   getContainer: [String, Function],
   closeOnPopstate: Boolean,
   closeOnClickAction: Boolean,

package/es/action-sheet/index.less

@@ -54,6 +54,11 @@
     &--loading {
       cursor: default;
     }
+    
+    &--has-subname {
+      padding-top: 9px;
+      padding-bottom: 9px;
+    }
   }
 
   &__cancel {
@@ -63,7 +68,7 @@
   }
 
   &__subname {
-    margin-top: @padding-xs;
+    margin-top: 2px;
     color: @action-sheet-subname-color;
     font-size: @action-sheet-subname-font-size;
     line-height: @action-sheet-subname-line-height;
@@ -86,6 +91,10 @@
     &::after {
       .hairline-bottom(@cell-border-color);
     }
+    
+    &--align-start {
+      text-align: start;
+    }
   }
 
   &__description {

package/es/index.js

@@ -21,6 +21,7 @@ import Lazyload from './lazyload';
 import Loading from './loading';
 import Locale from './locale';
 import NavBar from './nav-bar';
+import NoticeBar from './notice-bar';
 import NumberKeyboard from './number-keyboard';
 import Overlay from './overlay';
 import PasswordInput from './password-input';
@@ -47,10 +48,10 @@ import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '0.1.35';
+var version = '0.1.39';
 
 function install(Vue) {
-  var components = [ActionSheet, Area, Avatar, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, DatetimePicker, Dialog, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, Loading, Locale, NavBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, Radio, RadioGroup, Rate, Row, Signature, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabs, Tag, Toast, Uploader];
+  var components = [ActionSheet, Area, Avatar, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, DatetimePicker, Dialog, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, Loading, Locale, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, Radio, RadioGroup, Rate, Row, Signature, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabs, Tag, Toast, Uploader];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -64,7 +65,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, ActionSheet, Area, Avatar, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, DatetimePicker, Dialog, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, Loading, Locale, NavBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, Radio, RadioGroup, Rate, Row, Signature, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabs, Tag, Toast, Uploader };
+export { install, version, ActionSheet, Area, Avatar, Button, Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Col, DatetimePicker, Dialog, Empty, Field, Form, Icon, Image, ImagePreview, Info, Lazyload, Loading, Locale, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, Picker, Popup, Radio, RadioGroup, Rate, Row, Signature, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabs, Tag, Toast, Uploader };
 export default {
   install: install,
   version: version

package/es/notice-bar/index.css

@@ -0,0 +1 @@
+.zt-notice-bar{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:36px;padding:0 12px 0 16px;color:#fa8500;font-size:14px;line-height:20px;background-color:rgba(255,205,35,.2)}.zt-notice-bar__left-icon,.zt-notice-bar__right-icon{min-width:24px;font-size:20px}.zt-notice-bar__right-icon{text-align:right;cursor:pointer}.zt-notice-bar__wrap{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:100%;overflow:hidden}.zt-notice-bar__content{position:absolute;white-space:nowrap;-webkit-transition-timing-function:linear;transition-timing-function:linear}.zt-notice-bar__content.zt-ellipsis{max-width:100%}.zt-notice-bar--wrapable{height:auto;padding:8px 16px}.zt-notice-bar--wrapable .zt-notice-bar__wrap{height:auto}.zt-notice-bar--wrapable .zt-notice-bar__content{position:relative;white-space:normal;word-wrap:break-word}

package/es/notice-bar/index.js

@@ -0,0 +1,223 @@
+import { createNamespace, isDef } from '../utils';
+import { doubleRaf, raf } from '../utils/dom/raf';
+import { BindEventMixin } from '../mixins/bind-event';
+import Icon from '../icon';
+
+var _createNamespace = createNamespace('notice-bar'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+export default createComponent({
+  mixins: [BindEventMixin(function (bind) {
+    // fix cache issues with forwards and back history in safari
+    // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
+    bind(window, 'pageshow', this.reset);
+  })],
+  inject: {
+    ztPopup: {
+      default: null
+    }
+  },
+  props: {
+    text: String,
+    mode: String,
+    color: String,
+    leftIcon: String,
+    wrapable: Boolean,
+    background: String,
+    scrollable: {
+      type: Boolean,
+      default: null
+    },
+    delay: {
+      type: [Number, String],
+      default: 1
+    },
+    speed: {
+      type: [Number, String],
+      default: 60
+    }
+  },
+  data: function data() {
+    return {
+      show: true,
+      offset: 0,
+      duration: 0,
+      wrapWidth: 0,
+      contentWidth: 0
+    };
+  },
+  watch: {
+    scrollable: 'reset',
+    text: {
+      handler: 'reset',
+      immediate: true
+    }
+  },
+  created: function created() {
+    // https://github.com/youzan/vant/issues/8634
+    if (this.ztPopup) {
+      this.ztPopup.onReopen(this.reset);
+    }
+  },
+  activated: function activated() {
+    this.reset();
+  },
+  methods: {
+    onClickIcon: function onClickIcon(event) {
+      if (this.mode === 'closeable') {
+        this.show = false;
+        this.$emit('close', event);
+      }
+    },
+    onTransitionEnd: function onTransitionEnd() {
+      var _this = this;
+
+      this.offset = this.wrapWidth;
+      this.duration = 0; // wait for Vue to render offset
+      // using nextTick won't work in iOS14
+
+      raf(function () {
+        // use double raf to ensure animation can start
+        doubleRaf(function () {
+          _this.offset = -_this.contentWidth;
+          _this.duration = (_this.contentWidth + _this.wrapWidth) / _this.speed;
+
+          _this.$emit('replay');
+        });
+      });
+    },
+    // not an exposed-api, but may used by some users
+    start: function start() {
+      this.reset();
+    },
+    // @exposed-api
+    reset: function reset() {
+      var _this2 = this;
+
+      var delay = isDef(this.delay) ? this.delay * 1000 : 0;
+      this.offset = 0;
+      this.duration = 0;
+      this.wrapWidth = 0;
+      this.contentWidth = 0;
+      clearTimeout(this.startTimer);
+      this.startTimer = setTimeout(function () {
+        var _this2$$refs = _this2.$refs,
+            wrap = _this2$$refs.wrap,
+            content = _this2$$refs.content;
+
+        if (!wrap || !content || _this2.scrollable === false) {
+          return;
+        }
+
+        var wrapWidth = wrap.getBoundingClientRect().width;
+        var contentWidth = content.getBoundingClientRect().width;
+
+        if (_this2.scrollable || contentWidth > wrapWidth) {
+          doubleRaf(function () {
+            _this2.offset = -contentWidth;
+            _this2.duration = contentWidth / _this2.speed;
+            _this2.wrapWidth = wrapWidth;
+            _this2.contentWidth = contentWidth;
+          });
+        }
+      }, delay);
+    }
+  },
+  render: function render() {
+    var _this3 = this;
+
+    var h = arguments[0];
+    var slots = this.slots,
+        mode = this.mode,
+        leftIcon = this.leftIcon,
+        onClickIcon = this.onClickIcon;
+    var barStyle = {
+      color: this.color,
+      background: this.background
+    };
+    var contentStyle = {
+      transform: this.offset ? "translateX(" + this.offset + "px)" : '',
+      transitionDuration: this.duration + 's'
+    };
+
+    function LeftIcon() {
+      var slot = slots('left-icon');
+
+      if (slot) {
+        return slot;
+      }
+
+      if (leftIcon) {
+        return h(Icon, {
+          "class": bem('left-icon'),
+          "attrs": {
+            "name": leftIcon
+          }
+        });
+      }
+    }
+
+    function RightIcon() {
+      var slot = slots('right-icon');
+
+      if (slot) {
+        return slot;
+      }
+
+      var iconName;
+
+      if (mode === 'closeable') {
+        iconName = 'close';
+      } else if (mode === 'link') {
+        iconName = 'arrow';
+      }
+
+      if (iconName) {
+        return h(Icon, {
+          "class": bem('right-icon'),
+          "attrs": {
+            "name": iconName
+          },
+          "on": {
+            "click": onClickIcon
+          }
+        });
+      }
+    }
+
+    return h("div", {
+      "attrs": {
+        "role": "alert"
+      },
+      "directives": [{
+        name: "show",
+        value: this.show
+      }],
+      "class": bem({
+        wrapable: this.wrapable
+      }),
+      "style": barStyle,
+      "on": {
+        "click": function click(event) {
+          _this3.$emit('click', event);
+        }
+      }
+    }, [LeftIcon(), h("div", {
+      "ref": "wrap",
+      "class": bem('wrap'),
+      "attrs": {
+        "role": "marquee"
+      }
+    }, [h("div", {
+      "ref": "content",
+      "class": [bem('content'), {
+        'zt-ellipsis': this.scrollable === false && !this.wrapable
+      }],
+      "style": contentStyle,
+      "on": {
+        "transitionend": this.onTransitionEnd
+      }
+    }, [this.slots() || this.text])]), RightIcon()]);
+  }
+});

package/es/notice-bar/index.less

@@ -0,0 +1,60 @@
+@import '../style/var';
+
+.zt-notice-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: @notice-bar-height;
+  padding: @notice-bar-padding;
+  color: @notice-bar-text-color;
+  font-size: @notice-bar-font-size;
+  line-height: @notice-bar-line-height;
+  background-color: @notice-bar-background-color;
+
+  &__left-icon,
+  &__right-icon {
+    min-width: @notice-bar-icon-min-width;
+    font-size: @notice-bar-icon-size;
+  }
+
+  &__right-icon {
+    text-align: right;
+    cursor: pointer;
+  }
+
+  &__wrap {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &__content {
+    position: absolute;
+    white-space: nowrap;
+    transition-timing-function: linear;
+
+    &.zt-ellipsis {
+      max-width: 100%;
+    }
+  }
+
+  &--wrapable {
+    height: auto;
+    padding: @notice-bar-wrapable-padding;
+
+    .zt-notice-bar {
+      &__wrap {
+        height: auto;
+      }
+
+      &__content {
+        position: relative;
+        white-space: normal;
+        word-wrap: break-word;
+      }
+    }
+  }
+}

package/es/notice-bar/style/index.js

@@ -0,0 +1,4 @@
+import '../../style/base.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../index.css';

package/es/notice-bar/style/less.js

@@ -0,0 +1,4 @@
+import '../../style/base.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../index.less';

package/es/pdf-viewer/index.js

@@ -9,10 +9,33 @@ import pdf from "egova-vue-pdf";
 Vue.use(pdf);
 import Toast from '../toast';
 import Loading from '../loading';
-import Popup from '../popup';
+import Picker from '../picker';
 
 var _ = require('lodash');
 
+import { resetObject } from "../utils/index";
+
+var defaultData = function defaultData() {
+  return {
+    loadingTask: null,
+    pdfPageCount: 0,
+    pageNum: 1,
+    loadedRatio: 0,
+    loading: false,
+    rotateDegree: 0,
+    pdfArr: [],
+    pageChangeByButton: false,
+    showPicker: false,
+    bodyInitialHeight: "auto",
+    bodyInitialMinHeight: "auto",
+    metaContent: "",
+    steps: 1,
+    allStep: 0,
+    timer: null,
+    completeLoaded: false
+  };
+};
+
 export default createComponent({
   props: {
     url: {
@@ -21,19 +44,7 @@ export default createComponent({
     }
   },
   data: function data() {
-    return {
-      pdfPageCount: 0,
-      pageNum: 1,
-      loadedRatio: 0,
-      loading: false,
-      rotateDegree: 0,
-      pdfArr: [],
-      pageChangeByButton: false,
-      showPicker: false,
-      bodyInitialHeight: "auto",
-      bodyInitialMinHeight: "auto",
-      metaContent: ""
-    };
+    return defaultData();
   },
   mounted: function mounted() {
     var _document$getElements;
@@ -81,47 +92,87 @@ export default createComponent({
       document.body.style.minHeight = '100%';
     },
     reset: function reset() {
-      this.pdfPageCount = 0;
-      this.pageNum = 1;
+      this.clearTimer();
+      resetObject(this, defaultData());
     },
-    getPdfNumPages: function getPdfNumPages() {
+    clearTimer: function clearTimer() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+    },
+    startPdfLoaderTimer: function startPdfLoaderTimer() {
       var _this = this;
 
+      // 一次加载10页，定时器分布加载后续内容
+      var stepPages = 10;
+      this.allStep = Math.floor(this.pdfPageCount / stepPages);
+
+      var loadPage = function loadPage() {
+        if (_this.pdfArr.length < _this.pdfPageCount) {
+          var max = _this.steps * stepPages < _this.pdfPageCount ? _this.steps * stepPages : _this.pdfPageCount;
+
+          for (var i = (_this.steps - 1) * stepPages; i < max; i++) {
+            _this.pdfArr.push({});
+          }
+
+          _this.steps++;
+        } else {
+          _this.clearTimer();
+
+          _this.completeLoaded = true;
+
+          _this.changePage();
+        }
+      };
+
+      loadPage();
+      this.timer = setInterval(function () {
+        loadPage();
+      }, 500);
+    },
+    getPdfNumPages: function getPdfNumPages() {
+      var _this2 = this;
+
       if (!this.url) {
         return;
       }
 
       this.loading = true;
-      var loadingTask = pdf.createLoadingTask(this.url);
-      loadingTask.promise.then(function (v) {
-        _this.pdfPageCount = v.numPages;
-        var pdfArr = [];
+      this.loadingTask = pdf.createLoadingTask(this.url);
+      this.loadingTask.promise.then(function (v) {
+        _this2.pdfPageCount = v.numPages;
 
-        for (var i = 0; i < _this.pdfPageCount; i++) {
-          pdfArr.push({});
-        }
+        _this2.startPdfLoaderTimer();
 
-        _this.pdfArr = pdfArr;
         window.onscroll = _.throttle(function () {
-          if (_this.pageChangeByButton) {
-            _this.pageChangeByButton = false;
+          if (_this2.pageChangeByButton) {
+            _this2.pageChangeByButton = false;
           } else {
-            _this.changePage();
+            _this2.changePage();
           }
         }, 300);
       }).catch(function (err) {
         console.error("pdf 加载失败", err);
       }).finally(function () {
-        _this.loading = false;
+        _this2.loading = false;
       });
     },
     changePage: function changePage() {
+      if (!this.completeLoaded) {
+        return;
+      }
+
+      if (window.pageYOffset === 0) {
+        this.pageNum = 1;
+      }
+
       var i = 1,
           count = this.pdfPageCount;
 
       do {
         if (window.pageYOffset >= this.findPos(document.getElementById("pdfContent" + i)) && window.pageYOffset <= this.findPos(document.getElementById("pdfContent" + (i + 1)))) {
-          this.pageNum = i;
+          this.pageNum = i + 1;
         }
 
         i++;
@@ -169,11 +220,12 @@ export default createComponent({
       var h = this.$createElement;
       return h("div", [h(pdf, {
         "attrs": {
-          "src": this.url,
+          "src": this.loadingTask,
           "page": i,
           "id": "pdfContent" + i,
           "rotate": this.rotateDegree
         },
+        "key": i,
         "ref": "pdfContent" + i,
         "on": {
           "loaded": this.onPdfLoaded,
@@ -186,25 +238,18 @@ export default createComponent({
     showPagePicker: function showPagePicker() {
       this.showPicker = true;
     },
-    genPageList: function genPageList() {
-      var _this2 = this;
-
-      var h = this.$createElement;
+    getPageList: function getPageList() {
       return this.pdfArr.map(function (v, i) {
-        return h("div", {
-          "class": bem("page-item"),
-          "on": {
-            "click": function click() {
-              return _this2.setPage(i + 1);
-            }
-          }
-        }, [i + 1]);
+        return i + 1;
       });
     },
     setPage: function setPage(i) {
       this.pageNum = i;
       this.pageChangeByButton = true;
       this.showPicker = false;
+    },
+    cancel: function cancel() {
+      this.showPicker = false;
     }
   },
   render: function render(h) {
@@ -217,6 +262,10 @@ export default createComponent({
     }) : h(), h("div", {
       "class": bem("pdf-top")
     }, [h("div", {
+      "directives": [{
+        name: "show",
+        value: this.completeLoaded
+      }],
       "class": bem("page-btn")
     }, [h("svg", {
       "attrs": {
@@ -274,13 +323,17 @@ export default createComponent({
       }
     }, [this.pdfArr.map(function (x, i) {
       return _this3.genPdf(i + 1);
-    })]) : h(), h(Popup, {
-      "class": bem('popup'),
+    })]) : h(), h(Picker, {
       "attrs": {
-        "value": this.showPicker,
-        "position": "bottom",
-        "closeOnClickOverlay": false
+        "show-picker": this.showPicker,
+        "default-index": this.pageNum - 1,
+        "title": "页码",
+        "columns": this.getPageList()
+      },
+      "on": {
+        "cancel": this.cancel,
+        "confirm": this.setPage
       }
-    }, [this.genPageList()])]);
+    })]);
   }
 });

package/es/pdf-viewer/style/index.js

@@ -5,4 +5,5 @@ import '../../icon/index.css';
 import '../../popup/index.css';
 import '../../loading/index.css';
 import '../../toast/index.css';
+import '../../picker/index.css';
 import '../index.css';