dvant/lib/notice-bar/index.js

A Vue.js 2.0 Mobile UI at dawnwin modified from Youzan

'use strict';

exports.__esModule = true;

var _utils = require('../utils');

exports.default = (0, _utils.create)({
  render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { directives: [{ name: "show", rawName: "v-show", value: _vm.showNoticeBar, expression: "showNoticeBar" }], staticClass: "van-notice-bar", class: { 'van-notice-bar--withicon': _vm.mode }, style: _vm.barStyle, on: { "click": function click($event) {
          _vm.$emit('click');
        } } }, [_vm.leftIcon ? _c('div', { staticClass: "van-notice-bar__left-icon" }, [_c('img', { attrs: { "src": _vm.leftIcon } })]) : _vm._e(), _c('div', { ref: "contentWrap", staticClass: "van-notice-bar__content-wrap" }, [_c('div', { ref: "content", staticClass: "van-notice-bar__content", class: _vm.animationClass, style: _vm.contentStyle, on: { "animationend": _vm.onAnimationEnd, "webkitAnimationEnd": _vm.onAnimationEnd } }, [_vm._t("default", [_vm._v(_vm._s(_vm.text))])], 2)]), _vm.iconName ? _c('icon', { staticClass: "van-notice-bar__right-icon", attrs: { "name": _vm.iconName }, on: { "click": _vm.onClickIcon } }) : _vm._e()], 1);
  },

  name: 'van-notice-bar',

  props: {
    text: String,
    mode: String,
    color: String,
    leftIcon: String,
    background: String,
    delay: {
      type: [String, Number],
      default: 1
    },
    scrollable: {
      type: Boolean,
      default: true
    },
    speed: {
      type: Number,
      default: 50
    }
  },

  data: function data() {
    return {
      wrapWidth: 0,
      firstRound: true,
      duration: 0,
      offsetWidth: 0,
      showNoticeBar: true,
      animationClass: ''
    };
  },


  computed: {
    iconName: function iconName() {
      return this.mode === 'closeable' ? 'close' : this.mode === 'link' ? 'arrow' : '';
    },
    barStyle: function barStyle() {
      return {
        color: this.color,
        background: this.background
      };
    },
    contentStyle: function contentStyle() {
      return {
        paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
        animationDelay: (this.firstRound ? this.delay : 0) + 's',
        animationDuration: this.duration + 's'
      };
    }
  },

  mounted: function mounted() {
    this.initAnimation();
  },


  watch: {
    text: function text() {
      this.$nextTick(this.initAnimation);
    }
  },

  methods: {
    onClickIcon: function onClickIcon() {
      this.showNoticeBar = this.mode !== 'closeable';
    },
    onAnimationEnd: function onAnimationEnd() {
      var _this = this;

      this.firstRound = false;
      this.$nextTick(function () {
        _this.duration = (_this.offsetWidth + _this.wrapWidth) / _this.speed;
        _this.animationClass = 'van-notice-bar__play--infinite';
      });
    },
    initAnimation: function initAnimation() {
      var offsetWidth = this.$refs.content.getBoundingClientRect().width;
      var wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
      if (this.scrollable && offsetWidth > wrapWidth) {
        this.wrapWidth = wrapWidth;
        this.offsetWidth = offsetWidth;
        this.duration = offsetWidth / this.speed;
        this.animationClass = 'van-notice-bar__play';
      }
    }
  }
});