123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _raf = require("../utils/dom/raf");
- var _bindEvent = require("../mixins/bind-event");
- var _icon = _interopRequireDefault(require("../icon"));
- var _createNamespace = (0, _utils.createNamespace)('notice-bar'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var _default = createComponent({
- mixins: [(0, _bindEvent.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
- (0, _raf.raf)(function () {
- // use double raf to ensure animation can start
- (0, _raf.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 = (0, _utils.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) {
- (0, _raf.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.default, {
- "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.default, {
- "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()]);
- }
- });
- exports.default = _default;
|