| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 | 
							- 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: {
 
-     vanPopup: {
 
-       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/vant-ui/vant/issues/8634
 
-     if (this.vanPopup) {
 
-       this.vanPopup.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 = 'cross';
 
-       } 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'), {
 
-         'van-ellipsis': this.scrollable === false && !this.wrapable
 
-       }],
 
-       "style": contentStyle,
 
-       "on": {
 
-         "transitionend": this.onTransitionEnd
 
-       }
 
-     }, [this.slots() || this.text])]), RightIcon()]);
 
-   }
 
- });
 
 
  |